http://rokesh.ir/change-position-and-coding-of-wordpress-photo-gallery/

آموزش تغییر مکان و کدنویسی گالری تصاویر وردپرس

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

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

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

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

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

//deactivate WordPress gallery function
remove_shortcode('gallery', 'gallery_shortcode');

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

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

add_shortcode( 'gallery', 'my_gallery');
function my_gallery(){
    return '';
}

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

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

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

preg_match_all( '/\[gallery.*ids=.(.*).\]/' , 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];
$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 قرار می گیرند مربوط به هر کدام از تصاویر گالری ها می شود.


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

دیدگاه کاربران

  1. MILAD0007

    سایت خیلی خوبی دارید….
    ممنون استفاده کردم…

  2. koolfayfer

    سلام
    بسیار ممنون
    من نیاز دارم دور هر عکس یک دایو بندازم که بیشتر استایل بدم
    راهش چیه؟
    و این که هر عکسی چه بزرگ چه کوچیک داخل گالری میزاریم بدون لینک نمایش همه رو کوچیک نشون میده؟؟؟

    • سعید شعبانی

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

  3. koolfayfer

    در مورد سوال اول ممنونم
    اما دومی رو میشه توضیح بدین
    پاینده باشید

    • سعید شعبانی

      نگاه کنید داخل این آموزش ما اومدیم و از تابع wp_get_attachment_image در ساده ترین حالت ممکن استفاده کردیم، این تابع میاد و یک تگ img با توجه به اطلاعات ورودی ای که بهش می دیم ایجاد می کنه، در اینجا ما فقط id تصویر موجود در گالری را بهش دادیم، در حالی که این تابع چهار تا ورودی را قبول می کنه wp_get_attachment_image( $attachment_id, $size, $icon, $attr ) ، مثلا با استفاده از ورودی size می تونید اندازه های دیگه تصویر را دریافت کنید. علاوه بر این تابع شما می تونید از توابع و دستور های دیگه PHP هم استفاده کنید.

کاربر گرامی برای ارسال دیدگاه اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.