همه چیز در مورد تصویر شاخص وردپرس
همه چیز در مورد تصویرشاخص وردپرس
تصویرشاخص وردپرس یا همان تصویر شاخص نسخه کوچکتری از عکس ها هستند که در سایت برای همه نوشته ها و پست ها در اندازه های مختلف و با افکت های متفاوت قرار داده میشود.تصاویر شاخص در وردپرس به عنوان یکی از مهم ترین قابلیت ها در وردپرس شناخته شده است
امروز میخواهم به قول معروف این خاصیت ویژه از وردپرس رو بترکونیم و تموم چیزهایی که برای این وِیژگی نیاز داریم رو در خدمت شما قرار دهیم.
پس با ما همراه باشیم
۱) ابتدا فعال کردن تصاویر شاخص در وردپرس :
خب برای فعال کردن این ویژگی منحصر به فرد وردپرس ابتدا فایل functions.php رو از قسمت “نمایش>>ویرایشگر” در وردپرس باز کنید و کد زیر رو به آن اضافه کنید.
1 2 3 4 5 | <?php if (function_exists('add_theme_support')) { add_theme_support( 'post-thumbnails' ); } ?> |
خب تا اینجا این ویژگی در وردپرس شما افزوده شد و الان نیازه که شما این تصاویر را در سایت خود نمایش دهید و شما میتوانید تصاویر شاخص را در تمام فایل ها به جز استایل و فایل فانکشن میتوانید اضافه کند.برای فراخوانی این ویژ”ی در پوسته سایت خود باید کد زیر را در داخل حلقه وردپرس قرار گیرد یعنی بعد از کد زیر باید قرار گیرد.
1 | while ( have_posts() ) : the_post(); |
۲) فراخوانی تصویر شاخص در قالب وردپرس
برای این که تصویر شاخص را در قالب وردپرس نمایش دهیم کد زیر را در محل دلخواه قالب وردپرس قرار میدهیم.
1 | <?php the_post_thumbnail(); ?> |
اما یکسری کد خیلی مفید و صد البته بهتر برای استفاده در طراحی وب و قالب وردپرس
افزودن alt و title به همه تصاویر در وردپرس
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | function add_alt_tags( $content ){ global $post; preg_match_all('/<img (.*?)\/>/', $content, $images); if( !is_null( $images ) ){ foreach( $images[1] as $index => $value ){ if( !preg_match( '/alt=/', $value ) ){ $new_img = str_replace( '<img', '<img alt="'.get_the_title().'"', $images[0][$index] ); $content = str_replace( $images[0][$index], $new_img, $content ); } } } return $content; } add_filter( 'the_content', 'add_alt_tags', 99999 ); function add_alt_tags( $content ){ global $post; preg_match_all('/<img (.*?)\/>/', $content, $images); if( !is_null( $images ) ){ foreach( $images[1] as $index => $value ){ if( !preg_match( '/alt=/', $value ) ){ $new_img = str_replace( '<img', '<img alt="'.get_the_title().'"', $images[0][$index] ); $content = str_replace( $images[0][$index], $new_img, $content ); } } } return $content; } add_filter( 'the_content', 'add_alt_tags', 99999 ); |
برای نمایش تصویر شاخص در صورتی که نوشته درای تصویر شاخص نباشید میتوانیم از کد زیر استفاده کنیم. توسط این کد میتوانید المنت های مختلفی به تصویر شاخص وردپرس اضافه کنید.
1 | <?php the_post_thumbnail(array(WIDTH,HEIGHT), array('id'=>'YOUR ID' ,'class' => 'YOUR CLASS', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'' ) ); ?> |
نمایش تصویر شاخص خاص در صورتی که یک نوشته تصویر شاخص نداشته باشد
1 2 3 4 5 6 | <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } else { echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/no.jpg" />'; } ?> |
بدست آوردن آدرس مستقیم تصویر شاخص در وردپرس
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php the_post_thumbnail_url('medium'); ?> که طرز استفاده از ان به صورت زیر است : <img src="<?php the_post_thumbnail_url('medium'); ?>" /> و اگر بخواهیم از دستور شرطی استفاده کنیم به این صورت خواهد بود: <?php if ( has_post_thumbnail() ) { ?> <img src="<?php the_post_thumbnail_url('medium'); ?>" /> <?php } ?> |
نکته : میتوانید از مقدار های پیشفرض وردپرس یا حتی مقادیر ساختی اندازه تصاویر شاخص در وردپرس در کد های بالا استفاده بفرمایید.
این سایز ها شامل :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | به طور مثال / دو کد زیر باید در فانکشن قرار گیرد. add_image_size( 'single-post-thumbnail', 220, 170 ); add_image_size( 'slider', 700, 310 ); the_post_thumbnail_url('thumbnail'); // تصویر شاخص(default 150px x 150px max) the_post_thumbnail_url('medium'); // اندازه متوسط(default 300px x 300px max) the_post_thumbnail_url('large'); // اندازه بزرگ (default 640px x 640px max) the_post_thumbnail_url('full'); // اندازه اصلی تصویر (unmodified) the_post_thumbnail_url('slider'); // اندازه ساخته شده با کد بالایی (700px x 310px) the_post_thumbnail_url('single'); // اندازه ساخته شده با کد بالایی (220px x 170px) |
افزودن لینک به همراه یک rel به تمامی تصاویر شاخص
برای این کار باید کد زیر را در فایل فانکشن قالب سایت خودتون قرار بدین.توجه داشته باشید که میزان rel را lightbox قرار دادیم که شما میتوانید تغییر بدید.
1 2 3 4 5 6 7 8 | add_filter(‘the_content’, ‘my_addlightboxrel’); function my_addlightboxrel($content) { global $post; $pattern ="/<a(.*?)href=(‘|\")(.*?).(bmp|gif|jpeg|jpg|png)(‘|\")(.*?)>/i"; $replacement = ‘<a$1href=$2$3.$4$5 rel="lightbox" title="’.$post->post_title.’"$6>’; $content = preg_replace($pattern, $replacement, $content); return $content; } |
قرار دادن اندازه های مختلف تصویر شاخص
اما همانطور که میدانید گاهی اوقات در طراحی قالب وردپرس ودر مکان های مختلف به اندازه های مختلف تصاویر نیاز داریم که برای این کار باید کدزیر را در فایل فانکشن قرار دهیم
1 2 3 4 5 | if (function_exists('add_image_size')){ add_image_size( 'first-thumb', 300, 255, true); add_image_size( 'secound-thumb', 400, 300, true); add_image_size( 'third-thumb', 125, 125, true); } |
و سپس برای نمایش ان نیز به این شکل زیر عمل کنیم
1 | <?php the_post_thumbnail('first-thumb'); ?> |
تعیین اولین تصویر پست به عنوان تصویر شاخص در وردپرس
برای این کار از چند روز میتونید استفاده کنید یکی این که از افزونه Auto Post Thumbnail استفاده کنید و نصب کنید و تمام
روش دوم این است که باید از کد زیر در فایل فانکشن استفاده کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 | function get_img() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "/images/default.jpg"; } return $first_img; } |
در کد بالا اولین عکس فراخوانی شده و اگر شما عکسی در پست خود نداشته باشید با قرار دادن عکسی def.jpg در شاخه images می توانید عکس پیش فرض را تعریف کنید.
و برای نمایش این تصویر نیز از کد زیر استفاده کنید
1 | <img src="<?php echo get_image() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> |
بهترین کد نمایش تصویر شاخص
بهترین کد استاندارد هست از نظر بده کد زیر است.
این کد تصویر شاخص را نمایش میدهد به همراه ویژگی های alt & title که نمایش داده خواهد شد و برای سئو خیلی مهم هستن و در صورتی که نوشته تصویر شاخص نداشته باشه اولین تصویر پست را نمایش خواهد داد.( دقت کنید که حتما باید کد تعیین اولین تصویر پست به عنوان تصویر شاخص در وردپرس را در فایل فاکشن قرار دهید. )
1 2 3 4 5 6 7 | <img src="<?php if ( has_post_thumbnail() ) { the_post_thumbnail_url('medium'); } else { echo '' . get_image('medium') . ''; } ?>" alt="<?php the_title_attribute(); ?>"> |
نکته : سایر ها را نیز همانطور که در بالا توضیح داده شد میتوانید تغییر دهید.
موفق و پیروز باشید
منبع : پاتوق وردپرس
