همه چیز در مورد تصویر شاخص وردپرس

تاریخ انتشار 12 جولای 2015

دسته بندی

همه چیز در مورد تصویرشاخص وردپرس

تصویرشاخص وردپرس یا همان تصویر شاخص نسخه کوچکتری از عکس ها هستند که در سایت برای همه نوشته ها و پست ها در اندازه های مختلف و با افکت های متفاوت قرار داده میشود.تصاویر شاخص در وردپرس به عنوان یکی از مهم ترین قابلیت ها در وردپرس شناخته شده است

امروز میخواهم به قول معروف این خاصیت ویژه از وردپرس رو بترکونیم و تموم چیزهایی که برای این وِیژگی نیاز داریم رو در خدمت شما قرار دهیم.

پس با ما همراه باشیم

۱) ابتدا فعال کردن تصاویر شاخص در وردپرس :

خب برای فعال کردن این ویژگی منحصر به فرد وردپرس ابتدا فایل functions.php رو از قسمت “نمایش>>ویرایشگر” در وردپرس باز کنید و کد زیر رو به آن اضافه کنید.

<?php
if (function_exists('add_theme_support')) {
add_theme_support( 'post-thumbnails' );
}
?>

<?php

if (function_exists('add_theme_support')) {

add_theme_support( 'post-thumbnails' );

}

خب تا اینجا این ویژگی در وردپرس شما افزوده شد و الان نیازه که شما این تصاویر را در سایت خود نمایش دهید و شما میتوانید تصاویر شاخص را در تمام فایل ها به جز استایل و فایل فانکشن میتوانید اضافه کند.برای فراخوانی این ویژ”ی در پوسته سایت خود باید کد زیر را در داخل حلقه وردپرس قرار گیرد یعنی بعد از کد زیر باید قرار گیرد.

while ( have_posts() ) : the_post();

1	while ( have_posts() ) : the_post();

۲) فراخوانی تصویر شاخص در قالب وردپرس

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

<?php the_post_thumbnail(); ?>

1	<?php the_post_thumbnail(); ?>

اما یکسری کد خیلی مفید و صد البته بهتر برای استفاده در طراحی وب و قالب وردپرس

افزودن alt و title به همه تصاویر در وردپرس

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

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

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

<?php the_post_thumbnail(array(WIDTH,HEIGHT), array('id'=>'YOUR ID' ,'class' => 'YOUR CLASS', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'' ) ); ?>

1	<?php the_post_thumbnail(array(WIDTH,HEIGHT), array('id'=>'YOUR ID' ,'class' => 'YOUR CLASS', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'' ) ); ?>

نمایش تصویر شاخص خاص در صورتی که یک نوشته تصویر شاخص نداشته باشد

  <?php	if ( has_post_thumbnail() ) {
			the_post_thumbnail();
			}
			else {
			echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/no.jpg" />';
			} ?>

<?php if ( has_post_thumbnail() ) {

the_post_thumbnail();

}

else {

echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/no.jpg" />';

} ?>

بدست آوردن آدرس مستقیم تصویر شاخص در وردپرس

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

<?php the_post_thumbnail_url('medium'); ?>

که طرز استفاده از ان به صورت زیر است :

و اگر بخواهیم از دستور شرطی استفاده کنیم به این صورت خواهد بود:

<?php if ( has_post_thumbnail() ) { ?>

<?php } ?>

نکته : میتوانید از مقدار های پیشفرض وردپرس یا حتی مقادیر ساختی اندازه تصاویر شاخص در وردپرس در کد های بالا استفاده بفرمایید.

این سایز ها شامل :

به طور مثال / دو کد زیر باید در فانکشن قرار گیرد.

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)

به طور مثال / دو کد زیر باید در فانکشن قرار گیرد.

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 قرار دادیم که شما میتوانید تغییر بدید.

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

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;

}

قرار دادن اندازه های مختلف تصویر شاخص

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

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

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

}

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

<?php the_post_thumbnail('first-thumb'); ?>

1	<?php the_post_thumbnail('first-thumb'); ?>

تعیین اولین تصویر پست به عنوان تصویر شاخص در وردپرس

برای این کار از چند روز میتونید استفاده کنید یکی این که از افزونه Auto Post Thumbnail استفاده کنید و نصب کنید و تمام

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

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

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 می توانید عکس پیش فرض را تعریف کنید.

و برای نمایش این تصویر نیز از کد زیر استفاده کنید

<img src="<?php echo get_image() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

1	<img src="<?php echo get_image() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

بهترین کد نمایش تصویر شاخص

بهترین کد استاندارد هست از نظر بده کد زیر است.

این کد تصویر شاخص را نمایش میدهد به همراه ویژگی های alt & title که نمایش داده خواهد شد و برای سئو خیلی مهم هستن و در صورتی که نوشته تصویر شاخص نداشته باشه اولین تصویر پست را نمایش خواهد داد.( دقت کنید که حتما باید کد تعیین اولین تصویر پست به عنوان تصویر شاخص در وردپرس را در فایل فاکشن قرار دهید. )

<img src="<?php if ( has_post_thumbnail() ) {
		            the_post_thumbnail_url('medium');
	            }
	            else {
		            echo '' . get_image('medium') . '';
	            }
	            ?>" alt="<?php the_title_attribute(); ?>">

<img src="<?php if ( has_post_thumbnail() ) {

the_post_thumbnail_url('medium');

}

else {

echo '' . get_image('medium') . '';

}

?>" alt="<?php the_title_attribute(); ?>">

نکته : سایر ها را نیز همانطور که در بالا توضیح داده شد میتوانید تغییر دهید.

موفق و پیروز باشید

منبع : پاتوق وردپرس

همه چیز در مورد تصویر شاخص وردپرس

4.8 از 5 رای

کلیدواژه : post thumbnail thumbnail thumbnail wordpress تصویر بند انگشتی تصویر بند انگشتی وردپرس تصویر شاخص کد وردپرس همه چیز در مورد تصویر بند انگشتی همه چیز در مورد تصویر شاخص همه چیز در مورد تصویر شاخص وردپرس وردپرس

همه چیز در مورد تصویر شاخص وردپرس

مرا از بروزرسانی این نوشته با خبر کن

همه چیز در مورد تصویرشاخص وردپرس

۱) ابتدا فعال کردن تصاویر شاخص در وردپرس :

۲) فراخوانی تصویر شاخص در قالب وردپرس

اما یکسری کد خیلی مفید و صد البته بهتر برای استفاده در طراحی وب و قالب وردپرس

افزودن alt و title به همه تصاویر در وردپرس

بدست آوردن آدرس مستقیم تصویر شاخص در وردپرس

افزودن لینک به همراه یک rel به تمامی تصاویر شاخص

قرار دادن اندازه های مختلف تصویر شاخص

تعیین اولین تصویر پست به عنوان تصویر شاخص در وردپرس

بهترین کد نمایش تصویر شاخص

پاتوق وردپرس | قالب وردپرس | اموزش وردپرس