خوش آمدید به انجمن ای فری

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

درخواست راهنمایی

اگر نیاز به راهنمایی دارید درخواست خود را ثبت کنید

فروشگاه

قالب و افزونه و محصولات خود را میتوانید اینجا خرید و فروش کنید

دانلود منابع

قالب و افزونه های جدید و بروز را میتوایند از اینجا دانلود کنید

آموزش ساخت گالری تصویر در وردپرس

WALKER

مدیر کل انجمن
عضویت
11/13/18
ارسال ها
6,100
امتیاز واکنش
5,488
محل سکونت
tehran
آنتی ویروس
1424

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

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

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

ساخت گالری تصویر در وردپرس

قبل از شروع اجازه دهید به آنچه ندر پایان بدست خواهد آمد نگاهی بیاندازیم:

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



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

ساخت گالری تصویر در وردپرس

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

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


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

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

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

برای مثال:

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

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

نحوه اضافه کردن فیلدهای اضافی به رسانه آپلود وردپرس

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

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

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

با توجه به اینکه نوع پست سفارشی شما آلبوم عکس می باشد ، بنابراین باید یک فایل به نام 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 که شما باید از آن استفاده کنید کلاس .album-grid است.

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

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


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

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

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

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

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

//Insert grid code below this line

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

موفق باشید.
 
ارسال کننده موضوعات مشابه انجمن پاسخ ها تاریخ
mona.habibizadeh مواد معمول در ساخت قاب های گوشی گفتگوی آزاد 0
sslri اندروید ساخت نرم افزار اندروید برای وردپرس + پنل مدیریت Flink v1.1.5 NULLED افزونه های وردپرس 7
elinaz در ساخت قاب گوشی از چه متریالی استفاده می شود؟ آموزش های نرم افزار و سخت افزار 0
maede ساخت لینک خودکار در زنفور پشتیبانی زنفورو 3
Dr Software ساخت جیمیل بدون شماره یا با شماره مجازی گفتگوی آزاد 1
sslri دانلود پروفایل بیلدر ساخت پروفایل حرفه ای وردپرس - Profile Builder Pro افزونه های وردپرس 13
alirahmani7443 ساخت api ووکامرس برای ارتباط با اپلیکیشن اندروید آموزشهای وردپرس 2
sslri آموزش آموزش کامل ساخت شماره مجازی تلگرام رایگان آموزش های پرمیوم 1
sslri دانلود ساخت صفحات سفارشی محصول و صفحات آرشیو ووکامرس - WooLentor Pro افزونه های وردپرس 3
sslri سورس کد ساخت اپلیکیشن اندروید Universal - Full Multi-Purpose Android App v4.4 گفتگوی آزاد 0
sslri معرفی اسکریپت ساخت قالب سایت به صورت آنلاین با اسکریپت SiteBuilder Lite اسکریپت 0
sslri قالب چند منظوره حرفه ای upscale با امکان ساخت فروشگاه قالب های وردپرس 0
soheilnew درخواست آموزش ساخت گروه کاربری vip با قابلیت پرداخت پشتیبانی زنفورو 0
YasserDivar آموزش ساخت دیسک / فلش مولتی بوت به زبان فارسی آموزش های نرم افزار 0
lord ساخت نوار اطلاع رسانی وردپرس 3
M ساخت فرم در افزونه گراویتی فرم افزونه های وردپرس 4
WALKER آموزش ساخت خودکار QR Code از مطالب سایت وردپرسی آموزشهای وردپرس 0
WALKER دانلود Tactile - WordPress Mobile Menu v2.1 افزونه ساخت منو مخصوص نمایش در موبایل برای وردپرس افزونه های وردپرس 0
WALKER دانلود Smart Slider 3 PRO & 90+ Templates v3.4.1.9 | افزونه ساخت اسلایدر حرفه ای وردپرس افزونه های وردپرس 11
M آموزش ساخت واترارک با استفاده از نرم افزار Arclab Watermark Studio آموزش های نرم افزار 0
M آموزش ساخت اکانت Origin آموزش های نرم افزار 0
M آموزش ساخت اکانت Steam درخواست کرک و فعال ساز نرم افزارها 0
WALKER آموزش چگونگی ساخت ریدایرکت در وردپرس آموزشهای وردپرس 0
WALKER دانلود SeedProd WordPress Coming Soon Pages & Maintenance Mode v5.12.5 افزونه صفحه در دست ساخت برای وردپرس افزونه های وردپرس 1
WALKER دانلود Construction - Business & Building Company WordPress Theme v1.0.9.4 قالب وردپرس شرکتی ساخت و ساز قالب های وردپرس 2
WALKER دانلود UberMenu - WordPress Mega Menu Plugin v3.7.1 افزونه ساخت مگا منو حرفه ای وردپرس افزونه های وردپرس 5
WALKER آموزش ساخت جدول در وردپرس با WP Data Tables آموزشهای وردپرس 0
WALKER دانلود wpDataTables - Tables and Charts Manager for WordPress v3.0.3 افزونه ساخت جدول پیشرفته وردپرس افزونه های وردپرس 14
WALKER دانلود JetTabs - Tabs and Accordions for Elementor Page Builder v2.1.10 افزونه ساخت تب در وردپرس افزونه های وردپرس 24
WALKER دانلود FormCraft - Premium WordPress Form Builder v3.8.24 | افزونه ساخت فرم های حرفه ای وردپرس افزونه های وردپرس 15
WALKER آموزش ساخت فرم حرفه ای در 60 ثانیه در وردپرس با Formidable Forms آموزشهای وردپرس 0
WALKER دانلود WP Clever FAQ Builder - Smart support tool for Wordpress v1.38 افزونه ساخت پرسش و پاسخ وردپرس افزونه های وردپرس 2
WALKER دانلود WP Google Maps - Map Plugin for WordPress v2.2.0 افزونه ساخت نقشه گوگل برای وردپرس افزونه های وردپرس 2
WALKER دانلود JetWooBuilder - WooCommerce Page Builder Addon for Elementor v1.7.0 ساخت صفحات ووکامرس برای المنتور افزونه های وردپرس 17
WALKER دانلود BuildPress - Multi-purpose Construction and Landscape WP Theme v5.6.0 قالب معماری و ساخت ساز وردپرس قالب های وردپرس 4
WALKER دانلود Android Woocommerce v1.9.2 افزونه ساخت اپلیکیشن اندروید برای ووکامرس افزونه های وردپرس 6
WALKER دانلود Pithree - Construction & Building WordPress Theme v1.7 قالب ساخت و ساز وردپرس قالب های وردپرس 3
WALKER دانلود UberGrid - Responsive Grid Builder for WordPress v2.9.4.5 افزونه ساخت گرید در وردپرس افزونه های وردپرس 0
WALKER دانلود Jumbo: A 3-in-1 full-screen menu for WordPress v3.5 ساخت منوی تمام صفحه در وردپرس افزونه های وردپرس 1
Maryam دانلود افزونه ساخت و مدیریت لینک در وردپرس Autolinks Manager v1.12 افزونه های وردپرس 1
WALKER دانلود افزونه ساخت منوی موبایل در وردپرس Touchy - WordPress Mobile Menu Plugin v4.2 افزونه های وردپرس 4
WALKER دانلود افزونه ساخت بخش وبلاگی در وردپرس Blog Designer PRO for WordPress v2.7.2 افزونه های وردپرس 8
WALKER دانلود افزونه وردپرس ساخت لیست ایمیل Thrive Themes Leads Plugin v2.1.2 افزونه های وردپرس 0
WALKER دانلود افزونه وردپرس ساخت دایرکتوری لینک Simple Link Directory Pro - WordPress Plugin v12.9.3 افزونه های وردپرس 17
M افزونه ساخت اپلیکیشن اندروید و ای اواس وب وردپرس افزونه های وردپرس 1
WALKER دانلود افزونه ساخت تایم لاین در وردپرس Cool Timeline Pro - WordPress Timeline Plugin v3.5.0 افزونه های وردپرس 26
WALKER دانلود افزونه ساخت کاتالوگ آنلاین از محصولات در ووکامرس YITH WooCommerce Catalog Mode v2.0.10 افزونه های وردپرس 9
WALKER آموزش ساخت قالب جداگانه برای هر پست در وردپرس آموزشهای وردپرس 0
WALKER دانلود افزونه ساخت کارت هدیه در ووکامرس WooCommerce Ultimate Gift Card v2.7.5 افزونه های وردپرس 2
Magical اندروید دانلود MP3 Cutter - Ringtone Maker And Audio Editor Full 1.0.17 - نرم افزار ساخت رینگتون اختصاصی و ویرایش صدا برای اندروید نرم افزارهای اندروید 0

موضوعات مشابه

shape1
shape2
shape3
shape4
shape7
shape8
بالا