اگر در سایت وردپرسی خود مقاله‌های آموزشی منتشر می‌کنید، نمایش زمان مطالعه وردپرس می‌تواند به کاربر کمک کند قبل از شروع مطالعه بداند با یک مقاله کوتاه یا یک آموزش طولانی روبه رو است.

در مقاله‌هایی که شامل کدهای PHP، CSS، JavaScript یا HTML هستند، شمارش ساده تعداد کلمات می‌تواند نتیجه اشتباهی ایجاد کند؛ چون حجم کدها ممکن است بسیار زیاد باشد و زمان مطالعه را برای مثال به ۳۰ یا ۶۰ دقیقه افزایش دهد، در حالی که متن واقعی مقاله فقط چند دقیقه زمان برای مطالعه نیاز دارد.

در این آموزش یک تابع PHP برای وردپرس ایجاد می‌کنیم که کدهای داخل pre و code، بلوک‌های کد وردپرس و شورت کدها را از محاسبه حذف می‌کند و سپس زمان تقریبی مطالعه متن واقعی مقاله را نمایش می‌دهد.

این کد چه کاری انجام می‌دهد؟

تابع icodito_reading_time() محتوای نوشته را دریافت می‌کند و قبل از محاسبه زمان مطالعه، بخش‌هایی را که معمولاً قابل مطالعه به‌عنوان متن مقاله نیستند حذف می‌کند.

این موارد از محاسبه حذف می‌شوند:

• کدهای داخل تگ <pre>
• کدهای داخل تگ <code>
• بلوک‌های Code گوتنبرگ
• شورت کدهای وردپرس
• تگ‌های HTML
• فاصله‌های اضافی

سپس کلمات متن باقی مانده شمارش شده و زمان مطالعه بر اساس سرعت تقریبی ۲۲۰ کلمه در دقیقه محاسبه می‌شود.

کد نمایش زمان مطالعه وردپرس

کد زیر را می‌توانید در سایت خود قرار دهید:

function icodito_reading_time($post_id = null, $wpm = 220) {

    if (!$post_id) {
        $post_id = get_the_ID();
    }

    $content = get_post_field('post_content', $post_id);

    if (!$content) {
        return 1;
    }

    $content = preg_replace(
        '/<!-- wp:code.*?-->.*?<!-- \/wp:code -->/is',
        '',
        $content
    );

    $content = preg_replace(
        '/<pre\b[^>]*>.*?<\/pre>/is',
        '',
        $content
    );

    $content = preg_replace(
        '/<code\b[^>]*>.*?<\/code>/is',
        '',
        $content
    );

    $content = preg_replace(
        '/\[[^\]]+\]/',
        '',
        $content
    );

    $content = wp_strip_all_tags($content);

    $content = html_entity_decode($content, ENT_QUOTES, 'UTF-8');

    $content = preg_replace('/\s+/u', ' ', $content);

    $content = trim($content);

    if (!$content) {
        return 1;
    }

    preg_match_all('/[\p{L}\p{N}]+/u', $content, $matches);

    $word_count = count($matches[0]);

    return max(1, (int) ceil($word_count / $wpm));
}

پس از اضافه کردن این کد، تابع زیر در وردپرس در دسترس خواهد بود:

icodito_reading_time()

روش اول: اضافه کردن کد به functions.php قالب

یکی از روش‌های اضافه کردن این تابع، قرار دادن آن در فایل functions.php قالب فعال سایت است.

مسیر فایل معمولاً به شکل زیر است:

wp-content/ > themes/ > Your theme/ > functions.php

فایل functions.php قالب فعال را باز کنید و کد بالا را در انتهای فایل قرار دهید.

نکته مهم

اگر از قالب فرزند استفاده می‌کنید، بهتر است کد را در functions.php قالب فرزند قرار دهید تا با به‌روزرسانی قالب اصلی، کد شما از بین نرود.

بعد از ذخیره فایل، تابع در سایت قابل استفاده خواهد بود.

نمایش زمان مطالعه وردپرس در قالب سایت

بعد از اضافه کردن تابع، می‌توانید در هر قسمتی از فایل‌های PHP قالب که می‌خواهید زمان مطالعه وردپرس نمایش داده شود، از این کد استفاده کنید:

<?php echo icodito_reading_time(); ?>

برای مثال اگر بخواهید عبارت «دقیقه مطالعه» هم نمایش داده شود:

<?php echo icodito_reading_time(); ?> دقیقه مطالعه

اگر زمان مطالعه مقاله ۵ دقیقه باشد، خروجی به شکل زیر خواهد بود:

۵ دقیقه مطالعه

نمایش همراه با HTML

اگر بخواهید خروجی را داخل یک المان HTML قرار دهید:

<div class="reading-time">
    <?php echo icodito_reading_time(); ?> دقیقه مطالعه
</div>

به این ترتیب می‌توانید با CSS ظاهر آن را کاملاً مطابق طراحی قالب خود تنظیم کنید.

استفاده از Code Snippets به جای functions.php

اگر نمی‌خواهید فایل‌های قالب را مستقیماً ویرایش کنید، می‌توانید از افزونه‌های مدیریت کد مانند Code Snippets استفاده کنید.

این روش برای بسیاری از کاربران ساده تر است و با تغییر قالب نیز کد شما وابسته به فایل functions.php قالب نخواهد بود.

البته با تغییر قالب باز هم نیازمند تغییر در قالب جدیدتان را خواهید داشت تا تابع زمان مطالعه وردپرس، در قالب جدید نمایش داده شود .

مرحله اول: ایجاد Snippet جدید

از پیشخوان وردپرس وارد بخش مربوط به Snippets شوید و یک Snippet جدید ایجاد کنید.

برای مثال می‌توانید نام زیر را برای آن انتخاب کنید:

محاسبه زمان مطالعه

سپس کد icodito_reading_time() را داخل Snippet قرار دهید.

در Code Snippets نیازی نیست تگ زیر را در ابتدای کد قرار دهید:

<?php

یعنی کد را از این قسمت شروع کنید:

function icodito_reading_time($post_id = null, $wpm = 220) {

Snippet را ذخیره و فعال کنید.

اکنون تابع در سایت فعال است.

استفاده از تابع پس از فعال کردن Snippet

پس از فعال شدن Snippet، در فایل PHP قالب می‌توانید همانند قبل از این کد استفاده کنید:

<?php echo icodito_reading_time(); ?>

بنابراین استفاده از Code Snippets فقط روش قرار دادن تابع را تغییر می‌دهد و نحوه استفاده از تابع در قالب همان است.

تفاوت functions.php و Code Snippets

هر دو روش می‌توانند تابع را به وردپرس اضافه کنند، اما تفاوت مهمی دارند.

روش	مزیت
functions.php	بدون نیاز به افزونه اضافی
قالب فرزند	مناسب برای نگهداری کدهای اختصاصی قالب
Code Snippets	مدیریت ساده تر کدها از پیشخوان
Code Snippets	کد به قالب خاصی وابسته نیست

اگر کد مربوط به امکانات اختصاصی قالب شما است، قرار دادن آن در قالب فرزند گزینه مناسبی است.

اگر می‌خواهید کدهای PHP مختلف سایت را از یک بخش مدیریت کنید، استفاده از Code Snippets می‌تواند راحت تر باشد.

استفاده از زمان مطالعه در Elementor

اگر از Elementor برای طراحی صفحات سایت استفاده می‌کنید، یک نکته مهم وجود دارد:

کد PHP را نمی‌توان مستقیماً داخل اکثر فیلدهای متنی Elementor اجرا کرد.

بنابراین قرار دادن مستقیم این کد:

<?php echo icodito_reading_time(); ?>

داخل یک Text Editor معمولی Elementor روش مناسبی نیست.

برای استفاده از تابع در Elementor چند روش وجود دارد.

روش استفاده از Shortcode در Elementor

می‌توانیم یک شورت کد ساده برای تابع ایجاد کنیم تا Elementor بتواند خروجی آن را نمایش دهد.

کد زیر را علاوه بر تابع اصلی اضافه کنید، اگر از روش Code Snippets کد را اضافه کردید، در انتها کد بالا، کد پایین هم اضافه کنید:

function icodito_reading_time_shortcode() {
    return icodito_reading_time();
}

add_shortcode('icodito_reading_time', 'icodito_reading_time_shortcode');

حالا شورت کد زیر در وردپرس ایجاد شده است:

[icodito_reading_time]

استفاده در Elementor

در ویرایشگر Elementor، یک ویجت Shortcode را در محل مورد نظر قرار دهید.

سپس این کد را وارد کنید:

[icodito_reading_time]

Elementor خروجی تابع را نمایش می‌دهد.

برای مثال اگر زمان مطالعه مقاله ۷ دقیقه باشد، خروجی:

7

خواهد بود.

اگر می‌خواهید عبارت «دقیقه مطالعه» نیز نمایش داده شود، می‌توانید از این شورت‌کد استفاده کنید:

function icodito_reading_time_shortcode() {
    return icodito_reading_time() . ' دقیقه مطالعه';
}

add_shortcode('icodito_reading_time', 'icodito_reading_time_shortcode');

در این حالت:

[icodito_reading_time]

خروجی زیر را خواهد داشت:

۷ دقیقه مطالعه

اگر بخواهیم از Dynamic Tags در Elementor استفاده کنیم چه؟

در Elementor Pro امکان استفاده از Dynamic Tags برای برخی داده‌های وردپرس وجود دارد، اما تابع PHP سفارشی icodito_reading_time() به صورت خودکار به Dynamic Tags اضافه نمی‌شود.

بنابراین برای این تابع، استفاده از یک Shortcode ساده معمولاً راهکار مستقیم تری است.

نمایش زمان مطالعه در قالب نوشته‌ها

اگر هدف شما این است که زمان مطالعه به صورت خودکار در تمام نوشته‌ها نمایش داده شود، بهتر است تابع را یک بار در functions.php یا Code Snippets قرار دهید و سپس در فایل قالب نوشته، در محل موردنظر از:

<?php echo icodito_reading_time(); ?> دقیقه مطالعه

استفاده کنید.

برای مثال می‌توانید آن را کنار تاریخ انتشار، نام نویسنده یا دسته بندی مقاله قرار دهید:

<div class="post-meta">
    <span>
        <?php echo icodito_reading_time(); ?> دقیقه مطالعه
    </span>
</div>

تغییر سرعت محاسبه زمان مطالعه

سرعت پیش‌فرض این تابع ۲۲۰ کلمه در دقیقه است:

function icodito_reading_time($post_id = null, $wpm = 220)

در صورت نیاز می‌توانید هنگام فراخوانی تابع مقدار دیگری تعیین کنید.

برای مثال:

<?php echo icodito_reading_time(null, 200); ?>

در این حالت محاسبه بر اساس ۲۰۰ کلمه در دقیقه انجام می‌شود.

یا:

<?php echo icodito_reading_time(null, 250); ?>

که سرعت ۲۵۰ کلمه در دقیقه را در نظر می‌گیرد.

برای محتوای فارسی معمولی، مقدار ۲۲۰ می‌تواند یک مقدار مناسب و متعادل برای نمایش زمان تقریبی مطالعه باشد.

آیا کدهای PHP، CSS و JavaScript در زمان مطالعه محاسبه می‌شوند؟

خیر؛ اگر کدها داخل بلوک‌های استاندارد کد وردپرس یا تگ‌های pre و code قرار داشته باشند، از محاسبه حذف می‌شوند.

برای مثال این بخش:

<pre>
function example() {
    // کد طولانی
}
</pre>

در محاسبه زمان مطالعه در نظر گرفته نمی‌شود.

در نتیجه مقاله‌ای که شامل چندین قطعه کد طولانی است، زمان مطالعه آن بر اساس متن آموزشی و قابل خواندن مقاله محاسبه خواهد شد، نه حجم کدهای داخل آن.

جمع بندی

با استفاده از تابع icodito_reading_time() می‌توانید زمان تقریبی مطالعه نوشته‌های وردپرس را بدون نیاز به افزونه‌های سنگین محاسبه کنید.

این تابع به خصوص برای سایت‌های آموزشی و فنی که مقالات آن‌ها شامل کدهای PHP، HTML، CSS و JavaScript است کاربرد دارد؛ زیرا بخش‌های کدنویسی را از محاسبه زمان مطالعه کنار می‌گذارد.

برای استفاده مستقیم در فایل‌های PHP قالب:

<?php echo icodito_reading_time(); ?>

و برای استفاده در Elementor، پس از ایجاد شورت کد مربوط به تابع:

[icodito_reading_time]

را در ویجت Shortcode قرار دهید.

سوالات متداول