چگونگی تغییر مکان و کدنویسی گالری تصاویر وردپرس

کاربران عزیز رجیران در ادامهء سری آموزش های وردپرس,در این مطلب به شما آموزش می دهیم که چگونه گالری تصاویر خودتان را بسازید. همانطور که شما هم می دانید از نسخه ۲.۵ وردپرس به بعد امکان استفاده از شورت کد برای ساخت گالری تصاویر برای کاربران فراهم شد. این قابلیت در نسخه های بعدی وردپرس تکمیل شد و در حال حاظر که نسخه ۴.۱ وردپرس منتشر شده است ما می توانیم گالری های متعددی را در وردپرس ایجاد کنیم و حتی ظاهر واقعی آنها را در ویرایشگردیداری وردپرس نیز مشاهده نماییم.اما مشکلی که برای اکثر طراحان قالب و مدیران سایت های وردپرسی پیش می آید نحوه تغییر و کنترل خروجی این گالری های ساخته شده توسط وردپرس می باشد. مثلا برای ساخت یک گالری با قابلیت بزرگ و کوچک نمایی تصاویر و همچنین داشتن دکمه هایی برای حرکت بین تصاویر گالری, اگر از افزونه و کد خاصی استفاده نکنیم تنها راهی که خواهیم داشت نوشتن یک برنامه به زبان جاوا اسکریپت میباشد تا بتواند این قابلیت ها را به گالری وردپرس اضافه کند.

اما یک راه ساده تر هم وجود دارد و آن هم غیر فعال کردن شورت کد پیشفرض گالری وردپرس و در درست گرفتن کنترل آن می باشد. در این روش ما گالری های ایجاد شده توسط شورت کد های وردپرس را از محتوای اصلی پست جدا می کنیم و آن را در هر جایی از صفحه که دوست داریم با هر نوع کد نویسی ای که مد نظرمان است استفاده می کنیم. برای استفاده از این آموزش شما حتما باید با php, html و وردپرس آشنایی کافی داشته باشید تا بتوانید با توجه به نیازی که دارید کد نویسی مورد نظرتان را برای گالری های وردپرس ایجاد کنید.

گام اول : غیر فعال کردن شورت کد وردپرس

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

//deactivate WordPress gallery function<br />
remove_shortcode(‘gallery’, ‘gallery_shortcode’);

۱ ۲	//deactivate WordPress gallery function remove_shortcode(‘gallery’, ‘gallery_shortcode’);

گام دوم : استفاده از یک تابع خالی به جای تابع پیشفرض گالری وردپرس

حال برای اینکه در پست هایی که از شورت کد استفاده می شود با خطایی روبرو نشویم باید با استفاده از کد زیر که در فایل functions.php قرار می گیرد یک تابع خالی که ما اسم آن را my_gallery گذاشتیم را جایگزین تابع پیشفرض شورت کد گالری وردپرس کنیم.

add_shortcode( ‘gallery’, ‘my_gallery’);<br />
function my_gallery(){<br />
    return ”;<br />
}

add_shortcode( ‘gallery’, ‘my_gallery’);

function my_gallery(){

return ”;

}

گام سوم: پیدا کردن شورت کدهای استفاده شده در پست

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

توجه داشته باشید که کد هایی که در این مرحله استفاده می شود را با توجه به قالب سایت باید در فایل single.php یا content.php یا … قرار دهید. خوب در این مرحله با استفاده از تابع preg_match_all تمامی شورت کدهای gallery موجود در پست را در متغیر rokesh_gallery ذخیره می کنیم تا بتوانیم تغییراتی که دوست داریم را روی آنها اعمال کنیم.

preg_match_all( ‘/\

۱	preg_match_all( ‘/\

/’ , substr( get_the_content() , 0 ) , $rokesh_gallery );

۱	/‘ , substr( get_the_content() , 0 ) , $rokesh_gallery );

گام چهارم: ایجاد ساختار دلخواه برای گالری های موجود در پست

پس از اینکه تمامی شورت کد های گالری موجود در مطلب را پیدا و در متغییر rokesh_gallery ذخیره کردیم نوبت به آن می رسد تا از آنها استفاده کنیم. متغییر rokesh_gallery به صورت یک آرایه ایجاد شده است که خانه اول آرایه شامل تمامی شورت کد ها با جزئیاتشان است و خانه دوم آرایه تنها شامل id تصاویر هر گالری می باشد. پس ما می توانیم با چند دستور php به راحتی خروجی هر کدام از گالری ها را مدیریت کنیم.

در این مرحله ما با توجه به نیازی که داریم ساختار کد نویسی گالری های موجود در پست را ایجاد می کنیم. همانطور که در اول این آموزش از روکش هم گفتم برای ایجاد ساختار دلخواه, نیاز داریم تا با php, html و وردپرس آشنایی داشته باشیم. در اینجا من برای نمونه تنها با استفاده از تابع wp_get_attachment_image تگ img مربوط به هر تصویر را در یک div با کلاس gallery قرار داده ام.

$all_rokesh_gallery_shortcodes = $rokesh_gallery[0];<br />
$all_rokesh_gallery_shortcodes_ids = $rokesh_gallery[1];<br />
if ( $all_rokesh_gallery_shortcodes ) :<br />
	$rokesh_gallery_cont = 0;<br />
	foreach( $all_rokesh_gallery_shortcodes as $current_rokesh_gallery_loop ) :<br />
		$current_gallery_shortcodes = $current_rokesh_gallery_loop[$rokesh_gallery_cont];<br />
		$current_rokesh_gallery_shortcodes_ids = $all_rokesh_gallery_shortcodes_ids[$rokesh_gallery_cont];<br />
		// rokesh gallery body<br />
			echo ‘&lt;div class=”gallery”&gt;’;<br />
				$current_rokesh_gallery_ids = explode(“,”, $current_rokesh_gallery_shortcodes_ids);<br />
				foreach( $current_rokesh_gallery_ids as $current_rokesh_gallery_images ) :<br />
					// rokesh gallery item body<br />
						echo wp_get_attachment_image( $current_rokesh_gallery_images );<br />
					// rokesh gallery item body<br />
				endforeach;<br />
			echo ‘&lt;/div&gt;’;<br />
		// rokesh body<br />
		$rokesh_gallery_cont++;<br />
	endforeach;<br />
endif;

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

$all_rokesh_gallery_shortcodes = $rokesh_gallery[0];

$all_rokesh_gallery_shortcodes_ids = $rokesh_gallery[1];

if ( $all_rokesh_gallery_shortcodes ) :

$rokesh_gallery_cont = 0;

foreach( $all_rokesh_gallery_shortcodes as $current_rokesh_gallery_loop ) :

$current_gallery_shortcodes = $current_rokesh_gallery_loop[$rokesh_gallery_cont];

$current_rokesh_gallery_shortcodes_ids = $all_rokesh_gallery_shortcodes_ids[$rokesh_gallery_cont];

// rokesh gallery body

echo ‘<div class=”gallery”>’;

$current_rokesh_gallery_ids = explode(“,”, $current_rokesh_gallery_shortcodes_ids);

foreach( $current_rokesh_gallery_ids as $current_rokesh_gallery_images ) :

// rokesh gallery item body

echo wp_get_attachment_image( $current_rokesh_gallery_images );

// rokesh gallery item body

endforeach;

echo ‘</div>’;

// rokesh body

$rokesh_gallery_cont++;

endforeach;

endif;

در کدهای بالا بین دو عبارت rokesh gallery body می توانید کد های مربوط به گالری را قرار دهید و کدهایی هم که بین دو عبارت rokesh gallery item body قرار می گیرند مربوط به هر کدام از تصاویر گالری ها می شود.

چگونگی تغییر مکان و کدنویسی گالری تصاویر وردپرس

درباره نویسنده

نوشته‌های مرتبط

ارسال دیدگاه

دسته ها

جستجو

رجیران

نمايندگی

سرورها

طراحی سایت

هاست

ثبت دامنه