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

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

به طور معمول مردم به افزونه هایی مانند Gallery NextGen یا دیگری برای انجام چیزی شبیه به این کار می پردازند ما می خواستیم از  افزونه شخص ثالث اجتناب کنیم بنابراین تصمیم گرفتیم از ویژگی اصلی که WordPress ارائه می دهد استفاده کنیم. در این آموزش ما به شما نشان خواهیم داد که چگونه یک گالری آلبوم عکس عکس در WordPress بدون یک افزونه ایجاد کنید.

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

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

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

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

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

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

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

بیایید یک گالری آلبوم عکس ایجاد کنیم

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

کاری که باید انجام دهید این است که اندازه تصویر را در WordPress برای صفحه نمایش شبکه ثبت کنید.برای مثال :

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

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

نحوه اضافه کردن فیلدهای اضافی بهWordPress Media Uploader

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

حالا که شما چندین آلبوم دارید، می توانید کد را برای نمایش آن بگذارید.

بیایید بگوییم که نوع پست سفارشی شما آلبوم هاست. بنابراین شما یک فایل الگو به نام archive-albums.php ایجاد خواهید کرد.

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

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

<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 که شما باید داشته باشید class .album-grid است .

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

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

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

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

شما باید عنوان آلبوم و توضیحات را اضافه کنید. آلبوم را می توان با افزودن کد به این صورت انجام داد:

<h1><?php the_title(); ?></h1>
<div class="entry-content"><?php the_content(); ?></div>

//Insert grid code below this line

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