نمایش مطالب مرتبط در داخل محتوا بدون نصب افزونه وردپرس

در یکی دیگر از آموزش های توسعه وردپرس قصد داریم امکان نمایش مطالب مرتبط را در داخل محتوا پیاده سازی کنیم، احتمالا مشاهده کرده اید که در برخی وب سایت ها هنگام مطالعه یک مطلب تعدادی لینک مرتبط(با موضوع) تحت عنوان “بیشتر بخوانید” نشان داده می شود تا بازدیدکنندگان با کلیک بر روی آنها زمان بیشتری را در یک وب سایت سپری نمایند.

نمونه ای از نمایش مطالب مرتبط

نمایش مطالب مرتبط(Related Posts) یکی از تکنیک های عالی کاهش نرخ پرش یا خروج از سایت(Bounce Rate) است.

در هر حال برای پیاده سازی این تکنیک می توانید از روش های زیر استفاده نمائید:

  1. نصب افزونه ای مثل Inline Related Posts
  2. خودتان دست به کار شوید و از کدهای ساده ای که در ادامه بررسی خواهیم کرد استفاده کنید.

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

گام اول: ایجاد شورتکد(Shortcode) مطالب مرتبط

در ابتدا یک شورتکد به نام inline_related_posts تعریف می کنیم، این شورتکد را می توانید در داخل پست ها استفاده نمائید، حالا کدهای زیر را در فایل functions.php قرار دهید.

function st_register_inline_related_shortcode( $atts ) {
    
    extract(
        shortcode_atts( array('count' => '' ), $atts )
    );
    
    $count = ( empty( $count ) ) ? 1 : $count;

    return st_get_inline_related_posts( $count );
}
add_shortcode( 'inline_related_posts', 'st_register_inline_related_shortcode' );

 

چند نکته در رابطه با کدهای بالا:

  1. شورتکد inline_related_posts یک پارامتر به نام count دریافت می کند که به کمک آن می توانید تعداد مطالب مرتبط را مشخص کنید.
  2. در صورتی که تعداد مطالب مرتبط تعیین نشود به صورت پیش فرض یک مطلب نشان داده خواهد شد.
  3. تابع st_get_inline_related_posts در ادامه پیاده سازی می شود.

گام دوم: بدست آوردن مطالب مرتبط با استفاده از برچسب(Tag)

در این مرحله عملیات اصلی را انجام می دهیم، پس کدهای زیر را در ادامه کدهای قبلی به functions.php اضافه کنید.

function st_get_inline_related_posts( $count ) {
    
    $current_post_id = get_the_ID();

    $tags = wp_get_post_tags( $current_post_id );

    $tag_ids = array();

    foreach ( $tags as $key => $value ) {
        $tag_ids[ $key ] = $value->term_id;
    }

    $query = new WP_Query( array(
        'post_type' => 'post',
        'posts_per_page' => esc_attr( $count ),
        'post__not_in' => array( $current_post_id ),
        'tag__in' => $tag_ids
    ) );

    ob_start();
    
    if ( $query->found_posts ) {
        ?>
        <div class="inline-related-posts">
            <ul>
                <?php
                while ( $query->have_posts() ) {
                    $query->the_post();
                    ?>
                    <li> <?php the_post_thumbnail( 'thumbnail' ); ?>
                        <a href="' <?php the_permalink(); ?> '" target="_blank">
                            <?php the_title(); ?>
                        </a>
                    </li>
                    <?php
                }
                wp_reset_postdata();
                ?>
            </ul>
        </div>

        <?php
    }
    return ob_get_clean();
}

 

چند نکته در رابطه با کدهای بالا:

  1. تابع ()get_the_ID شناسه پست جاری که کاربر در حال مشاهده آن است را بر میگرداند.
  2. با تابع ()wp_get_post_tags لیست برچسب های پست جاری را بدست می آوریم، از آنجایی که تابع فوق فیلدهای مختلفی را برگشت می دهد فقط فیلد term_id را در یک حلقه foreach به آرایه کمکی tag_ids$ اضافه می کنیم.
  3. با استفاده از کلاس WP_Query فیلترهای موردنیاز را ست می کنیم.

گام سوم: استایل دهی به باکس مطالب مرتبط

در ادامه کدهای زیر را به فایل style.css یا هر فایل CSS که مدنظرتان است اضافه نمائید.

.inline-related-posts {
    background-color: #edf0f2;
    padding: 15px;
    margin: 20px 0;
  }

  .inline-related-posts ul {
    padding: 0;
    margin: 0;
  }

  .inline-related-posts ul li {
    list-style: none;
  }

  .inline-related-posts ul li img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-left: 5px;
  }

 

شیوه صحیح فراخوانی فایل style.css در وردپرس بدین صورت است، برای این منظور کدهای زیر را به فایل functions.php اضافه کنید.

function my_theme_scripts() {
   wp_enqueue_style( 'main-stylesheet', get_stylesheet_uri(), NULL, '1.0.0' );
}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

 

گام چهارم: تست شورتکد

در این مرحله صحت کدهای نوشته شده را تست و بررسی می کنیم، برای این منظور یک پست جدید ایجاد کرده و مطابق تصویر زیر شورتکد [inline_related_posts] را در هر کجای محتوا که دوست دارید قرار دهید، حال تغییرات را ذخیره کرده و آن را مشاهده کنید.

تست و بررسی شورتکد مشاهده مطالب مرتبط

 

نتیجه نهایی در تصویر زیر نشان داده شده است.

نمایش مطالب مرتبط در داخل محتوا

جمع بندی

همانطور که ملاحظه کردید می توانید برخی از نیازهای وب سایت تان را بدون نصب افزونه اضافی انجام دهید، چرا که استفاده از تعداد زیادی پلاگین در بلند مدت دردسرساز خواهد بود، پیشنهاد می کنیم برای رفع نیازی های کوچک و دم دستی ابتدا روش انجام آن کار را بدون نصب افزونه جستجو کنید، در صورتی که راه حلی پیدا نکردید آنگاه به دنبال افزونه مدنظر باشید.

نظرات و سوالات کاربران

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *