Year: 2024

[Cocoon] How to unlink your profile name
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;
}
```
2024-09-27
[Cocoon] How to hide the author name of an article

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

2024-09-27
[Rank Math SEO] How to set the date archive to not return to the top page.

If you install Rank Math SEO, it won’t jump to the date archive, so if you want to change that, you’ll need to change the settings. To do this, enable date archiving in Titles & Meta, Misc Pages tab in Rank Math SEO.

2024-09-27
Configuration when using WooCommerce and W3 Total Cache together.

If you want to use W3 Total Cache but have installed the WooCommerce plugin, I will introduce settings to prevent customer information from being cached.
(more…)

2024-09-27

[Cocoon] Increase site loading speed by lazy loading Adsense

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>

2024-09-27

[Contact Form 7] How to set Recaptcha.js so that it does not load on anything other than the contact page.
I am creating a contact form using Contact Form 7. I use Recaptcha to prevent spam, but because of this, Recaptcha.js always comes up in Pagespeed Insights in “Eliminate render-blocking resources” or in “Reduce unused JavaScript”. Therefore, I researched and implemented a method to prevent Recaptcha.js from loading on pages other than the contact page. Try putting the following code in functions.php.
```
function block_recaptcha_badge() {
 if ( !is_page( array( 'contact-me' ) ) ) {
 wp_dequeue_script( 'google-recaptcha' );
 wp_deregister_script( 'google-recaptcha' );
 add_filter( 'wpcf7_load_js', '__return_false' );
 add_filter( 'wpcf7_load_css', '__return_false' );
 }
}
add_action( 'wp_print_scripts', 'block_recaptcha_badge' );
```
If you have multiple contact form pages, you can increase the array(‘contact-me’ part, like below.
array( ‘contact-me’, ‘contact-me’, ‘contact-me-3’
2024-09-27
How to load WordPress JavaScript asynchronously
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.
2024-09-27
What is the phenomenon where the screen momentarily turns white when scrolling quickly on a smartphone?

This can happen if you are using web fonts.

2024-09-27
[WordPress] Speed up your website

Speeding up your WordPress website is crucial for improving user experience, search engine rankings, and conversion rates. Here’s a detailed guide on how to effectively enhance your website’s performance:
(more…)

2024-09-27

How to increase the font size of bbPress [Memorandum]

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

2024-09-27