تعریف تصویر شاخص برای نوشته ها در سایت وردپرس چند زبانه

یکی از مواردی که طراحان سایت در طراحی سایت بهش اهمیت میدن قرار دادن عکس شاخص یا همون thumbnail هستش که می تونه به پس های سایت شما جلوه ای زیبا رو بده و در اصلاح سایتی کاربرپسند داشته باشین.

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

چند تا راه داره که توی این مقاله ما یکی از ساده ترین راه رو به شما آموزش میدیم.

دانش مورد نیاز: php (نبودم نبود فقط کد رو کپی کنین)

توی بعضی از قالب ها کدهای مریوط به نوشته های سایت رو در فایل single.php تعریف میکنن در بعضی از قالب ها هم این کدها درفایل content.php هستش. فایل رو باز کنین و در قسمتی که عکش شاخص تعریف شده کد زیر رو کپی کنین. در قالب وردپرسی عکس شاخص رو با دستور زیر تعریف می کنن.

<?php the_post_thumbnail('your-class', array('title' => strip_tags(get_the_title()))); ?>

خب حالا کد زیر رو با دستور بالا جایگزین کنین.

<header>
    <!-- تعریف مسیر عکس شاخص نوشته جاری برای مقدار متغیر -->
    <?php $thumb_url_fa = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); ?>
    <!-- اگر زبان سایت rtl است دستورات زیر را در نظر بگیر -->
    <?php if(is_rtl()) : ?>
        <!-- در صورتی که سایت زبان فارسی باشد عکس آپلود شده را به عنوان عکس شاخص قرار می دهد -->
        <?php the_post_thumbnail('your-class', array('title' => strip_tags(get_the_title()))); ?>

        <!-- از دستور زیر نیز می توان استفاده نمود -->

        <img width="800" src="<?php echo $thumb_url_fa[0]; ?>" class="your-class" title="<?php the_title_attribute(); ?>"/>
    <!-- در غیر اینصورت اگر زبان سایت ltr است دستورات زیر را در نظر بکیر -->
    <?php else: ?>

        <?php

        $path_parts = pathinfo($thumb_url_fa[0]);
        <!-- تعریف عکس شاخص برای قسمت انگلیسی به صورت : Image-Name-en.Ext -->
        $thumb_url_en= $path_parts['dirname'].'/'.$path_parts['filename'].'-en'.'.'.$path_parts['extension'] ;

        ?>
        <!-- وجود داشته باشد '-en' + اگر در مسیر جاری عکس شاخص فارسی عکس با همان نام   -->
        <?php  if (getimagesize($thumb_url_en) !== false) : ?>
           <!-- عکس شاخص انگلیسی را برای نوشته در تنظیم کن -->
            <img width="800" src="<?php echo $thumb_url_en; ?>" class="your-class" title="<?php the_title_attribute(); ?>"/>

        <?php else: ?>
           <!-- اگر عکس ورژن انگلیسی وجود نداشته باشد همان عکس قسمت فارسی را برای پست تنظیم کن -->
           <img width="800" src="<?php echo $thumb_url_fa[0]; ?>" class="your-class" title="<?php the_title_attribute(); ?>"/>

       <?php endif; ?>
   <?php endif; ?>
</header>

 

 

*** کامنت ها رو پاک کنین. کامنت ها رو برای توضیح کد نوشتم. ***

از این به بعد کافیه وقتی در زبان فارسی یه عکس رو برای عکس شاخص در نظر می گیرین یه نسخه از عکس مورد نظر برای زبان دوم رو با همون نام به علاوه “-en”  همون موقع در همون مسیر آپلود کنین به عنوان مثال:

عکس زبان اول : picturename.jpg

عکس زبان دوم : picturename-en.jpg

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

به عنوان مثال مسیر عکس ها به شکل زیر درمیاد:

http://yourdomin.com/yourtheme/wp-content/uploads/2016/12/thumbnail.jpg

http://yourdomin.com/yourtheme/wp-content/uploads/2016/12/thumbnail-en.jpg

 

حالا می بینین که برای یک خبر دو تا عکس شاخص دارین که یکی توی زبان اول و دیگری هم توی زبان دوم سایت نشون داده میشه.

به همین راحتی!

البته یادتون نره که fopen توی فایل php.ini باید on باشه. در غیر اینصورت خطا میده.

امیدوارم این پست براتون مفید بوده باشه. هرگونه سوالی داشتین کامنت بزارین سریعآ جواب داده میشه.

نظر بدهید

ایمیل شما منتشر نخواهد شد. Required fields are marked *

شما می توانید استفاده نمایید از HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>