نحوه ایجاد گالری تصویر بدون افزونه

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

نکته: این یک آموزش نسبتا پیشرفته است که بسیاری از مفاهیم طراحی قالب وردپرس را گرد هم می آورد. شما باید دانش متوسطی از طراحی قالب وردپرس و HTML / CSS داشته باشید.

چیزی که ما تلاش می کنیم تا ایجاد کنیم:

قبل از شروع کار اجازه دهید تا نتیجه کار را بیان کنیم:

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

اگر کاربر روی آلبوم کلیک کند، اطلاعاتصاویری که در آن وجود دارد را نشان می دهد. و اگر روی تصویر کلیک کنید نام تصویر، نام عکاس و آدرس اینترنتی عکاس را نمایش می دهد.

چگونه آن را ایجاد کنیم؟

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

نحوه ایجاد گالری آلبوم تصویر

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

به عنوان مثال:

<pre>add_image_size( 'album-grid', 225, 150, true );

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

چگونه فیلد های اضافه را به رسانه آپلود اضافه کنیم.

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

نام این پست سفارشی را album قرار می دهیم و اسم فایل الگو را archive-album.php می نامیم.

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

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

<pre><li class="album-grid"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('album-grid'); ?></a></li>
<?php if ( $post->post_type == 'albums' && $post->post_status == 'publish' ) {
$attachments = get_posts( array(
'post_type' => 'attachment',
'posts_per_page' => -1,
'post_parent' => $post->ID,
'exclude'     => get_post_thumbnail_id()
) );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
$class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
$title = wp_get_attachment_link( $attachment->ID, 'album-grid', true );
echo '<li class="' . $class . ' album-grid">' . $title . '</li>';
}
}
}
?>

سبک اصلی css استفاده از کلاس .album-grid می باشد.

<pre>.album-grid{width: 225px; height: 150px; float: left; 
list-style: none; list-style-type: none; margin: 0 18px 30px 0px;}

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

بعد این یک قالب single-attachment ایجاد می کنیم که هر برای هر تصویر یک صفحه مجزا قرار می دهد و اطلاعاتی مثل:نام تصویر، نام عکاس و آدرس اینترنتی عکاس در آن دیده می شود.

تنها کاری که باقیمانده است ایجاد صفحات آلبوم بطور مجزا می باشد. دوباره فرض می کنیم که اسم پست سفارشی که می خواهیم ایجاد کنیمalbum است و نام آن را single-albums.php قرار می دهیم.

کدهای سرصفحه، پاصفحه، نوار کناری و دیگر عناصر لازم در صفحه را اضافه می کنیم. در عنصر حلقه از همان کدهای قالب archive-albums استفاده می کنیم. قبل از اضافه کردن خصوصیات تصویر پوشش آلبوم و تصاویر دیگر لازم است تا یک عنوان و توضیحی برای آلبوم تعیین کنیم.

با اضافه کردن این کد به سادگی می توانید انجام دهید:

</pre>
<pre><h1><?php the_title(); ?></h1>
<div class="entry-content"><?php the_content(); ?></div>
//Insert grid code below this line</pre>
<pre>

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

 

آنفایو مرجع مقالات تخصصی طراحی قالب وردپرس

مشاهده مقالات تخصصی طراحی قالب وردپرس در http://on5.ir