Code Snippets for this theme

Sivustoni Foorumit 4. Muut aiheet 4.1 WordPress & bbPress Code Snippets for this theme

Tyyppi: Opastus

Tämä aihe sisältää 8 vastaukset, 1 kirjoittaja, ja siihen kirjoitti viimeksi Tapio_Huuhaa 5.5.2019 20:14.

  • Julkaisija
    Viestit
  • #727 Vastaus
    Avatar
    Tapio_Huuhaa
    Ylläpitäjä

    I put to this topic code snippets and CSS, which I have used in this site just giving some advice for other developers.

    All codes are not exactly the same as in my site. In some cases I have put more reasonable attributes and CSS-rules, which I have used in this site.

    I have put all codes by using the plugin Code Snippet. It is very easy to use that plugin. The main advance compared with using child-themes are following:

    1. You don’t need to use FTP.
    2. You can easily create different versions. Just deactivate/activate snippets.
    3. If you put CSS as Code Snippet, WordPress save it just once – if yuo use Custom CSS and you have big CSS-files and you alter them of often, the size of the database can grow immerse.

    Hint. I have cleared the CSS of my theme and put the CSS as a Code Snippet. I have used the cleared field as testing, if the syntax of the CSS is correct. The Code Snippet plugin does not have syntax checker for CSS.

    Serious syntax errors in CSS might totally break the layout. Serious CSS and JavaScript syntax errors might also break important behaviors, especially visual editor is sensitive for syntax errors. Be carefull with JavaScript and CSS. Code Snippet has some level syntax highlight, but that issue could be better.

    Of course HTML syntax errors might also break the layout.

    Code Snippet checks PHP-errors. For frontend it is not possible to create invalid PHP-code.

    There is a big danger. If you create invalid PHP-code for backend, the only way to correct this issue is to edit the database and delete incorrect database record! If you don’t have database access to the database of your site, don’t make any backend code snippets and be sure that all code snippets are only for frontend!

    Please don’t comment in this topic – create a new topic, if you have some comments.

  • #728 Vastaus
    Avatar
    Tapio_Huuhaa
    Ylläpitäjä

    Here example code for breadcrumbs both to the top and bottom of the page with post articles and other pages.

    function printBreadcrublist($value){
    if($value==’top’){
    echo ‘<div id=”breadcrumblist-top” class=”breadcrumblist breadcrumblist-top”>’;
    echo bcn_display();
    echo ‘</div>’;
    }else{ return ‘<div id=”breadcrumblist-bottom” class=”breadcrumblist breadcrumblist-bottom”>’.bcn_display(true).'</div>’;}
    }

    function change_the_content($content) {
    $additional=’…’; // if you want to add something else
    return printBreadcrublist(‘top’).$content.$additional.printBreadcrublist(‘bottom’);
    }

    add_filter( ‘the_content’, ‘change_the_content’,10);

    For bbPress it is easy to set top and bottom breadcrumbs with bbp style pack. But if you want to set different CSS for the top and bottom breadcrumbs you must use own code. I made bottom breadcrumbs with my own code:

    function breadcrumbsBottom(){
    echo ’<div id=”bottombreadcrumbs”>’;
    echo bbp_breadcrumb();
    echo ’</div>’;
    }
    add_action( ’bbp_template_after_forums_index’ , ’breadcrumbsBottom’);
    add_action( ’bbp_template_after_single_forum’ , ’breadcrumbsBottom’);
    add_action( ’bbp_template_after_single_topic’ , ’breadcrumbsBottom’);

    The disadvantage of this code is that you mus first define common CSS for top and bottom breadcrumbs and override some CSS for the bottom breadcrumbs.

    If you don’t like that disable breadcrumbs and set also top breadcrumbs by using your own code. The following code should work (I have not tested it):

    function breadcrumbsTop(){
    echo ’<div id=”topbreadcrumbs”>’;
    echo bbp_breadcrumb();
    echo ’</div>’;
    }
    add_action( ’bbp_template_before_forums_index’ , ’breadcrumbsTop’);
    add_action( ’bbp_template_before_single_forum’ , ’breadcrumbsTop’);
    add_action( ’bbp_template_before_single_topic’ , ’breadcrumbsTop’);

    In order to get consistent result, set for breadcrumbs for normal pages and for forum using the same CSS. I defined separators as same:

    <span class=”bbp-breadcrumb-sep”> > </span>

    Below is some CSS, which I have defined for them. For home icons and for separators I have used Dashicons.

    .breadcrumblist a.home span, a.bbp-breadcrumb-home {
    font-size: 0!important;
    overflow: hidden;
    text-decoration: none!important;
    }
    .bbp-breadcrumb-home::before, .breadcrumblist a.home span::before {
    content: ”\f102”;
    font: 400 .9rem/1 dashicons;
    content: ”\f102”;
    position: relative;
    top: 1px!important;
    }
    .breadcrumblist .bbp-breadcrumb-sep {
    padding: 3px;
    }
    .bbp-breadcrumb-sep {
    font-size: 0!important;
    }
    .bbp-breadcrumb-sep::before {
    content: ’\f345’;
    font: 400 .8rem/1 dashicons;
    position: relative;
    top: .2rem;
    }

    _______________

    Note. I have added with WordPress functions also other texts before of after the main content. In the forum area using these function:

    add_action( ’bbp_template_before_forums_index’ , ’toBottom’);
    add_action( ’bbp_template_before_single_forum’ , ’toBottom’);
    add_action( ’bbp_template_before_single_topic’ , ’toBottom’);

    In normal pages using echo inside some function everything goes to top of the page regardless if the function call is before or after $content variable. Using return it is possible to put content also to the bottom of the page.

  • #730 Vastaus
    Avatar
    Tapio_Huuhaa
    Ylläpitäjä

    Originally this theme had search button on the top right only for normal search. I made quite the same looking form also for forum area.

    In these example codes I translated all Finnish texts in English.

    JavaScript – just simple open/close:

    function showSearch() {
    var x = document.getElementById(”search-form-bbpress”);
    if (x.style.display === ”none”) {x.style.display = ”block”;} else {x.style.display = ”none”;}
    document.getElementById(”bbp_search-bbpress”).focus();} // focus to the search field, not to the entire form

    HTML (as shortcode):

    function generateSearch(){
    return ’<div id=”forum-search”>
    <div id=”click”><a class=”click” href=”#” onclick=”showSearch();return false;”></a>
    <span class=”screen-reader-text”>Search from forums</span></div>
    <div id=”search-form-bbpress” style=”display:none;background-color:#044774″ class=”search-form-bbpress link-wrapper-search search-box-wrapper-bbpress”><form role=”search” method=”get” class=”search-form-bbpress” action=”https://www.sanaristikkofoorumi.net/wordpress/forums/search/”><div>
    <label class=”screen-reader-text hidden” for=”bbp_search”>Search:</label>
    <input type=”hidden” name=”action” value=”bbp-search-request” />
    <input type=”search” placeholder=”Search from forum” value=”” name=”bbp_search” id=”bbp_search-bbpress” class=”search-field-bbpress” /></div></form></div>’;
    }
    add_shortcode( ’showHideSearch’, ’generateSearch’ );

    Some of the related CSS (some issues are slightly different in my forum):

    .search-toggle::before, body.bbpress #click a::before {
    height: 48px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    overflow: hidden;
    right: 0;
    content: ”\f400”;
    display: block;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    }

    div#search-container,
    .search-form-bbpress {
    position:fixed!important;
    top:0px!important;
    z-index:10000000000000000000000000000
    }
    body.bbpress .search-form-bbpress #bbp_search-bbpress {
    margin-top:13px;
    height:22px;
    float:right;
    margin-right:14px!important;
    background-color:white!important;
    color:#333!important;
    }

    In my case other values depends on viewport. Width and right position could be also the same for all viewport values. Font for mobile version is following:

    font: 100 24px/1 Genericons;

    ________________

    Note. I have use the same kind of closing, opening function also for many other cases. If the element doesn’t have style=”display:none”, must define in CSS-stylesheet the same issue and JavaScript must be different. For example this show/hide social login box:

    function showSocialLogins() {
    var x = document.getElementById(”oa_social_login-2”);
    if (x.style.display === ”block”) { x.style.display = ”none”;} else {x.style.display = ”block”;}}

  • #731 Vastaus
    Avatar
    Tapio_Huuhaa
    Ylläpitäjä

    Logins, which use Dashicons has this PHP-code:

    function renderLogin(){
    $logged=is_user_logged_in();
    $currentUrl=’https://’ . $_SERVER[’HTTP_HOST’] . $_SERVER[’REQUEST_URI’];
    if($logged){
    $loginlogo='<div id=”login-logo”><a id=”log-out-link” href=”https://www.sanaristikkofoorumi.net/wordpress/wp-login.php?action=logout&redirect_to=’.$currentUrl.'”>&nbsp;</a></div>’;} else{
    $loginlogo='<span id=”social-login”><a href=”#” onclick=”showSocialLogins();return false;”></a></span><div id=”login-logo”><a id=”log-in-link” href=”https://www.sanaristikkofoorumi.net/wordpress/wp-login.php?action=login&redirect_to=’.$currentUrl.'”>&nbsp;</a></div>’;}
    return $loginlogo;
    }
    add_shortcode( ’loginit2’, ’renderLogin2’ );

    I created them with PHP in order to get reliable working redirect value. CSS for desktop and mobile is quite different. Dashions are following:

    #login-logo a::after{
    content: ”\f345\f110”;
    text-shadow:2px 2px 2px black;
    color:#fff;
    }
    body.logged-in #login-logo a::after{
    content: ”\f110\f345”;
    }

  • #732 Vastaus
    Avatar
    Tapio_Huuhaa
    Ylläpitäjä

    I had difficulties to get working CSS for Create new topic and Edit Profile links. I created for them my own solution.

    function bsp_profile_linkOwn ($type,$text) {
    if (!is_user_logged_in()) return ;
    $current_user = wp_get_current_user();
    $user=$current_user->ID ;
    if($type==”long”){$class=”subscription-toggle edit-profile”;}else {$class=”edit-profile”;}
    if($text){$text=”Edit your profile”;}
    return ’<a class=”’.$class.'” href=”’ . esc_url( bbp_get_user_profile_url( $user) ) . ’”><span>’.$text.'</span></a>’;
    }

    function newTopic(){

    // if (!is_user_logged_in()) return ; – add this if needed
    echo ’<div class=”beforelist”><a href=”#new-post” class=”subscription-toggle subsricption-toggle-new subsricption-toggle-new-topic”><span>New topic</span></a>’.bsp_profile_linkOwn(”long”,”Edit your profile”).'</div><div class=”speciallinks”><a href=”#new-post” class=”subsricption-toggle-new subsricption-toggle-new-topic”></a>’.bsp_profile_linkOwn(””,””).'</div>’;
    }

    function newPost(){

    //if (!is_user_logged_in()) return ; – add this if needed
    echo ’<div class=”beforelist”><a href=”#new-post” class=”subscription-toggle subsricption-toggle-new subsricption-toggle-new-post”><span>New comment</span></a>’.bsp_profile_linkOwn(”long”,”Edit your profile”).'</div><div class=”speciallinks”><a href=”#new-post” class=”subsricption-toggle-new subsricption-toggle-new-post”></a>’.bsp_profile_linkOwn(””,””).'</div>’;
    }

    add_action( ’bbp_template_before_single_forum’ , ’newtopic’);
    add_action( ’bbp_template_before_single_topic’ , ’newPost’);

    There are two versions. One for desktop and another for mobile. That’s why I don’t put related CSS about these. You can look at the mobile layout from here.

  • #733 Vastaus
    Avatar
    Tapio_Huuhaa
    Ylläpitäjä

    Some text can’t translate by using language files. I have translated them this way:

    function change_translate_text( $translated_text ) {
    if ( $translated_text == ’Unapprove’ ) {
    $translated_text = ’Älä hyväksy’;
    }
    if ( $translated_text == ’Report’ ) {
    $translated_text = ’Raportoi’;
    }


    return $translated_text;
    }
    add_filter( ’gettext’, ’change_translate_text’, 20 );

  • #734 Vastaus
    Avatar
    Tapio_Huuhaa
    Ylläpitäjä

    If text is in single row, it is easy to shorten text with CSS, for example breadcrumbs:

    .bbp-breadcrumb-current, .breadcrumblist .current-item {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    top: 5px;
    }

    This doesn’t work with multiline texts. For them must use jQueries:

    jQuery(document).ready(function($){
    $(’.bsp_freshness_display_title’).each(function() {
    if(this.innerHTML.length >40)
    this.innerHTML = this.innerHTML.slice(0,37) + ’…’;})
    $(’.bbp-reply-topic-title’).each(function() {
    if(this.innerHTML.length >40)
    this.innerHTML = this.innerHTML.slice(0,37) + ’…’;})
    $(’.bbp-topic-permalink’).each(function() {
    if(this.innerHTML.length >40)
    this.innerHTML = this.innerHTML.slice(0,37) + ’…’;})
    })

  • #735 Vastaus
    Avatar
    Tapio_Huuhaa
    Ylläpitäjä

    Sometimes it is needed to redirect to the top of the page. In order to get this working reliable I have set jQueries, for example these:

    jQuery(document).ready(function($) {
    $(’.search-toggle’).click(function() {
    $(window).scrollTop(0);})
    $(’.click’).click(function() {
    closeAssitantWindows();})
    $(’.search-toggle’).click(function() {
    $(window).scrollTop(0);})
    $(’.bottom-top-link’).click(function() {
    $(window).scrollTop(0);})
    })

  • #736 Vastaus
    Avatar
    Tapio_Huuhaa
    Ylläpitäjä

    On the bottom of the mobile version is counter, which shows the current position (that helps returning back to the same place):

    window.addEventListener(’scroll’, function() {
    document.getElementById(’onscroll’).innerHTML = Math.round(pageYOffset/18); // I shortened number and took off decimals; now it counts approximately lines

    CSS without colors is the following:

    div#onscroll{
    position:fixed;
    height:34px;
    bottom:2px;
    right:0px;
    width:56px;
    border-radius:3px 0 0 3px;
    font-size:0.7rem;
    z-index:10000000000000000000000000000000;
    box-sizing:border-box;
    padding:6px 4px 0 3px;
    color:#fff;
    text-shadow:2px 2px 2px black;
    text-align:right;
    }
    div#onscroll:hover::after {
    position:absolute;
    top:-22px;
    right:0;
    display:block;
    font-size:11px;
    color:#fff;
    background-color:#333;
    padding:3px;
    white-space:pre;
    content:’Counter…’;
    font-weight:bold;
    border-radius:3px;
    }

Vastaa aiheeseen: Code Snippets for this theme

Voit käyttää muotoilussa BBCode-merkintöjä.
Et voi käyttää muotoilussa edistyneempiä (advanced) BBCode-merkintöjä. Tallennettaessa ne poistetaan.

Tietosi:




Sivustoni Foorumit 4. Muut aiheet 4.1 WordPress & bbPress Code Snippets for this theme