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

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

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

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

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

همان طور هم که شما خودتون اطلاع دارید در وردپرس از نسخه ی 2.5 به بعد به وردپرس امکانی اضافه شد با نام شورت کد gallery که شما میتونید با استفاده از این ویژگی اضافه شده در سایت خودتون گالری تصاویر ایجاد کنید که این کاری کمک بسیاری به چیدمان و زیبایی ظاهری سایت شما خواهد کرد.

خوشبختانه با منتشر شدن نسخه های بعدی وردپرس این امکانات پیشرفت خوبی داشته به طوری که در نسخه 4.1 وردپرس که منتشر شده ما قادر هستیم برای ساتمون گالری های تصاویر مختلفی رو ایجاد کنیم منظور ایجاد چندین گالری تصاویر.

حتی امکانی اضافه شد که شما میتونید زمانی که دارید گالری تصاویر رو ایجاد کنید ظاهر واقعی اون رو در ویرایشگر دیداری مشاهده کنید.

در این وسط باز یه اشکال وجود داره و اون اینه که بسیاری از طراحان قالب ها و مدیران سایت های وردپرسی از خروجی default این گالری ها راضی نیستند و خوششون نمیاد و دوست دارند که خروجی این گالری هارو تغییر بدن و کنترلشون کنن.

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

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

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

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

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

گام اول

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

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

گام دوم

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

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

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

گام سوم

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

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

در این قسمت باید به نکته ای توجه کرد که کد هایی که در این قسمت نوشته میشوند باید به نسبت به قالب سایتمون در فایل single.php یا content.php یا … قرار بگیره که در قالب های مختلف این مسئله تغییر میکنه.

بسیار خب در این مرحله هم ما تمامی شورت کد های گالری پست ها رو به وسیله ی تابع preg_match_all در متغیر rokesh_gallery ذخیره میکنیم تا بتونیم کد های و تغییرات خودمون رو روشون اعمال کنیم.

preg_match_all( '/\ [galllery.*ids=.(.*).\] /' , substr( get_the_content() , 0 ) , $rokesh_gallery );

گام چهارم

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

این متغیر به صورت یک آرایه ایجاد شده آرایه به متغیری میگویند که مثل یک ساختمان چندین خانه درونش وجود داره که در هر کدام از خانه ها میشه یک متغیر ذخیره کرد.

در این آرایه خانه اول شامل تمامی شورت کد هاست که جزییاتشون هم به طور کامل ذکر شده و در خانه دوم این آرایه هم id تصاویر هر گالری قرار گرفته است.

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

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

اگر یادتان باشه در اول این آموزش هم بهتون گفتم که این آموزش بیشتر به درد کسایی میخوره که تا حدودی با HTML PHP و وردپرس آشنایی داشته باشن به این منظور اگر با موارد ذکر شده آشنایی نداشتید ما در این قسمت قطعه کدی رو براتون قرار دادیم ولی برای این کار حتما باید با یک نفر مسلط به موارد ذکر شده مشورت کنید و ازش کمک بخواید.

در زیر به عنوان مثال ما قطعه کد ساده ای رو در اختیار شما دوستان قرار داده ایم که میتونید ازش استفاده کنید در این کد با استفاده از تابع 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;

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

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

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