Tech Tag: Cocoon

Cocoon is a good one.

https://wp-cocoon.com

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;
}

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.

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.

By putting the following code in functions.php, you can load WordPress JS asynchronously. Effective if jquery.js or jquery-migrate.min.js appears in “Exclude resources that prevent rendering” in PageSpeed Insights.

if ( !(is_admin() ) ) {
    function replace_scripttag ( $tag ) {
        if ( !preg_match( '/\b(defer|async)\b/', $tag ) ) {
            return str_replace( "type='text/javascript'", 'async', $tag );
        }
        return $tag;
    }
    add_filter( 'script_loader_tag', 'replace_scripttag' );
}

However, if I do this, my PageSpeed Insights score will go up, but the Cocoon blog card image won’t display properly, so I changed it back.

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>

You can increase the font size of bbPress by putting the following code in the additional CSS of the theme.

bbpress-forums .bbp-topic-content p,
bbpress-forums .bbp-reply-content p {
    font-size: 18px;
}

.bbp-forum-title {
    font-size: 22px;
}

#bbpress-forums .bbp-forum-info .bbp-forum-content, #bbpress-forums p.bbp-topic-meta {
    font-size: 16px;
}

div#bbpress-forums .bbp-topic-permalink {
    font-size: 20px;
}

#bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-lead-topic, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-search-results, #bbpress-forums ul.bbp-topics {
    font-size: 18px;
	LINE-HEIGHT: 1.6em;
}

.bbp-reply-content {
    font-size: 20px;
}

div.bbp-breadcrumb, div.bbp-topic-tags {
    font-size: 16px;
}

To support Cocoon’s dark mode, add the following CSS.

#bbpress-forums li{
	color:#000;
}

#bbpress-forums a, #bbpress-forums a:hover{
	color:#608fbd;
}

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

There is a problem where the name in the profile section of Cocoon articles is turned into a link, and I will show you how to remove it. Add the following CSS to Add CSS and save it.

.author-box .author-name a {
    text-decoration: none;
    color: #333;
    pointer-events:none;
    cursor:default;
}

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.”