Category: Cocoon

If you change the index order from the posted date to the updated date, the updated articles will be displayed at the top.

This is a feature I really wanted. Being able to bring updated articles to the top means that even if past articles are getting buried, updating them will bring them back to life. Even articles that no longer see the light of day can be revived. It’s kind of nice. I sincerely believe that this is a feature that will make your blogging life even more enjoyable, so I decided to introduce it to you.

When the pagination is displayed vertically, buttons are difficult to press and the design is poor, so I looked into ways to set it horizontally. You can display it horizontally by going to Customize WordPress, going to Additional CSS, and inserting the code below.

.woocommerce-pagination .page-numbers {
height: auto;
width: auto;
}

There seems to be a way to display blogs in tiles with Cocoon. You can do this by going to Cocoon settings, index tab, and selecting “vertical card” from the card type.

If you want the articles to be in the same position, choose a “vertical card,” and if you don’t mind them being misaligned, choose a “tile card.”

Go to Cocoon settings, go to the body tab, scroll down, uncheck Show author name, and save.

Today I will show you how to lazy load Adsense to increase site loading speed. First, if you have auto ads turned on, turn them off from the Google Adsense page. After that, go to your own site and paste the following code in the ad code of the ad tab of Cocoon settings, so let’s change that.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Delete <script> to </script> from at the top of this and make it look like the following.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Save it.

Next, go to the access analysis/authentication tab in Cocoon settings, enter the following code in the footer code, and save.

<script>
//<![CDATA[
//lazy load ads
var lazyloadads = false;
window.addEventListener("scroll", function() {
    if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {

        (function() {
            var ad = document.createElement('script');
            ad.type = 'text/javascript';
            ad.async = true;
            ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
            var sc = document.getElementsByTagName('script')[0];
            sc.parentNode.insertBefore(ad, sc);
        })();

        lazyloadads = true;
    }
}, true)
//]]>
</script>

After installing a plugin called “LightStart”, the tab display of Cocoon’s index disappeared. After checking the WP admin screen, settings, display settings, and checking that it is set to “Latest Posts” and saving again, the tabs are now displayed.

Cocoon uses nesting as a PHP structure, so it won’t work if you just modify single.php. First, copy single.php in the parent theme, place it in the child theme, change the file name to single-custom-post-type-name.php, and edit the following parts of the content. This will separate the behavior for custom post types.

<?php //Post page content
cocoon_template_part('tmp/single-contents-Custom-post-type-name'); ?>

After that, create a folder called tmp in the child theme, duplicate the parent theme’s single-contents.php, place it in the child theme’s tmp folder, name it single-contents-custom-post-type-name.php, edit the following parts of the content. This is also one of the mechanisms to separate the behavior for custom post types.

<?php //Body template
cocoon_template_part('tmp/content-Custom-post-type-name') ?>

After that, copy the parent theme’s content.php, place it in the child theme’s tmp folder, name it content-custom-post-type-name.php, and add the following part anywhere.

<?php //Custom taxonomy categories/tags below the main text
        $post_type = get_post_type();
        $taxonomies = get_object_taxonomies($post_type, 'objects');

        $has_terms = false;

        if (!empty($taxonomies)) {
          foreach ($taxonomies as $taxonomy) {
            $terms = get_the_terms(get_the_ID(), $taxonomy->name);
            if ($terms && !is_wp_error($terms)) {
              $has_terms = true;
              // Show taxonomy name
              echo '<h3>' . esc_html($taxonomy->label) . '</h3>';
              echo '<ul>';
              foreach ($terms as $term) {
                $term_link = get_term_link($term);
                if (!is_wp_error($term_link)) {
                  echo '<li><a href="' . esc_url($term_link) . '">' . esc_html($term->name) . '</a></li>';
                } else {
                  echo '<li>' . esc_html($term->name) . '</li>';
                }
              }
              echo '</ul>';
            }
          }
        }
        ?>

By the way, I decided to put the above code directly below the code below.

<?php //Categories/tags below the main text
        if (is_category_tag_display_position_content_bottom() && is_single()) {
          cocoon_template_part('tmp/categories-tags');
        } ?>

Cocoon is a good one.

https://wp-cocoon.com