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

در قالب‌ها و صفحات لیست مطالب در سایت‌های مبتنی بر WordPress معمولاً صرفاً از تصویر شاخص یا Featured Image استفاده می‌شود که بسته به موضوع سایت، ممکن است خسته‌کننده به نظر برسد. می‌توان به جای نمایش یک عکس به عنوان تصویر شاخص صفحات، تعدادی تصویر را به صورت گالری تصاویر برای هر صفحه‌ی Child یا زیرمجموعه‌ی صفحه‌ای دیگر، نمایش داد.

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

قبلاً با ساختار مادر و فرزندی صفحات در سایت وردپرسی آشنا شدیم و به برخی کاربردهای آن اشاره کردیم:

آموزش ایجاد صفحه یا Page در وردپرس و آشنایی با صفحه‌ فرزند یا Child

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

در این مقاله، هدف اصلی این است که کدهای PHP لازم برای جمع‌آوری صفحات Child و همین‌طور عنوان صفحات زیرمجموعه یا Child و تصویر شاخص هر صفحه را بنویسیم و عکس‌ها و عنوانشان را به صفحه‌ی زیرمجموعه لینک کنیم. در ادامه می‌توانید به مقوله‌ی ظاهر گالری بپردازید و برای هر div‌ و img و a، کلاسی در نظر بگیرید و ظاهر گالری را با اضافه کردن تعریف هر کلاس در CSS، زیبا و جذاب کنید.

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

نیازهای اولیه

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

توجه کنید که قالبی که برای تست استفاده می‌کنید، دارای Action Hook باشد تا بتوانید محتوا در بخش‌های موردنظر اضافه کنید و آن را ویرایش کنید. داشتن یک ادیتور PHP نیز خطاهای شما را کمتر می‌کند.

دو روش کلی ایجاد گالری صفحات به صورت پلاگین گالری

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

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

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

شروع کار در هر دو روش یکسان است. برای سهولت کار بهتر است کدها به صورت یک پلاگین در فولدر wp-content/plugins قرار بگیرد که فعال و غیرفعال کردن و دیباگ کردن را سریع و ساده می‌کند. برای اطلاعات بیشتر در خصوص ساخت پلاگین وردپرس به مقاله‌ای که قبلاً تهیه کردیم مراجعه فرمایید:

آموزش برنامه‌نویسی یک پلاگین ساده برای وردپرس

در ادامه می‌توانید فایل‌های CSS و JavaScript را نیز در فولدر پلاگین قرار بدهید.

فرض کنید نام پلاگین و در واقع نام فایل PHP اصلی پلاگین، tutsplus-child-pages.php است. برای تعریف کردن مشخصات پلاگین، نام وجزئیاتی مثل نسخه و لایسنس، کدهای زیر در ابتدای فایل PHP قرار داده می‌شود.

/**
 * Plugin Name:  Tutsplus List Child Pages
 * Plugin URI:   https://github.com/rachelmccollin/tutsplus-list-child-pages
 * Description:  Output a list of children of the current page or a specific page with featured images.
 * Author:       Rachel McCollin
 * Author URI:   https://rachelmccollin.com
 * Version:      1.0
 * Text Domain:  tutsplus
 * License:      GPLv2.0+
 */

اگر قبلاً تعدادی صفحه‌ی مادر و فرزند یا به زبان دیگر Parent و Child نساخته‌اید، این کار را نیز انجام بدهید. به عنوان مثال در تصویر زیر ساختار درختی صفحات در یک سایت وردپرسی که برای تست کردن پلاگین استفاده می‌شود را مشاهده می‌کنید:

ایجاد لیست صفحات زیرمجموعه صفحه‌ی فعلی در وردپرس

اولین مرحله این است که تابعی برای لیست کردن صفحات فرزند تعریف کنیم. تعریف کردن کلی یک تابع در زبان PHP به صورت زیر است و می‌بایست دستورات مابین {} نوشته شود.

function tutpslus_list_current_child_pages() {
 
}

در تابع تعریف شده، اولین مرحله این است که یک دستور شرطی تعریف کنیم تا بررسی شود که آیا صفحه‌ی فعلی از نوع Page است یا خیر. در صورتی که صفحه از نوع Post یا به زبان دیگر، مطلب باشد، طبعاً نباید کار ادامه پیدا کند. اگر صفحه از نوع page نباشد، تابع is_page وردپرس مقدار False را برمی‌گرداند و در غیر این صورت مقدار خروجی True خواهد بود و آنچه درون گیومه پس از if است، اجرا می‌شود.

if ( is_page() ) {
 
}

گام بعدی تعریف کردن متغیر عمومی $post و تعریف کردن صفحه‌ی مادر است:

global $post;
 
// define the page they need to be children of
$parentpage = get_the_ID();

و مرحله‌ی بعدی تعریف کردن آرگومان‌های لازم برای استفاده از تابع get_pages()‌ وردپرس است. همان‌طور که مشاهده می‌کنید متغیرهای لازم به صورت یک آرایه به اسم $args تعریف می‌شوند که مقدار اول آن parent و مقدار بعدی ترتیب یا sort_order‌ است که به صورت نزولی تعریف می‌شود. sort_column یا ستون مرتب‌سازی نیز ستون صفحات در منو است. با این روش اگر ترتیب صفحات را در منوی وردپرس تغییر بدهید، ترتیب عناوین گالری صفحات نیز تغییر می‌کند.

// define args
$args = array(
    'parent' => $parentpage,
    'sort_order' => 'ASC',
    'sort_column' => 'menu_order',
);
 
$children = get_pages( $args );

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

گام بعدی ایجاد یک حلقه است که صفحات دریافت شده توسط تابع get_pages() را به ترتیب چاپ کند. برای ایجاد حلقه از foreach استفاده می‌کنیم. در ادامه توضیحات بیشتری خواهیم داد:

if ( $children ) { ?>
 
    <div class="child-page-listing">
         
        <h2><?php _e( 'Learn More', 'tutsplus' ); ?></h2>
     
        <?php //foreach loop to output
        foreach ( $children as $post ) {
             
            setup_postdata( $post ); ?>
             
            <article id="<?php the_ID(); ?>" class="child-listing" <?php post_class(); ?>>
                 
                <?php if ( has_post_thumbnail() ) { ?>
                 
                    <a class="child-post-title" href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                     
                    <div class="child-post-image">    
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail( 'medium' ); ?>
                        </a>
                    </div>    
             
                <?php }  ?>
             
            </article>    
             
        <?php } ?>
         
    </div>
     
<?php }

و توضیحاتی در مورد دستورات فوق:

ابتدا بررسی می‌شود که آیا تابع get_pages() مقداری را برگردانده و به عبارت دیگر $children تهی نیست.
دستور بعدی ایجاد تگ div با کلاس child-page-listing است که در نهایت می‌توانید استایل دلخواه برای آن در CSS در تعریف کنید.
خط بعدی چاپ کردن عنوان در تگ h2 یا هدینگ ۲ است.
خط بعدی آغاز حلقه‌ی foreach است و هر صفحه‌ی فرزند به صورت یک متغیر به اسم $post در حلقه پردازش می‌شود.
درون حلقه تگ article با کلاس child-listing به همراه کلاس پست و همین‌طور با مشخص کردن شناسه یا ID صفحه‌ی فرزند تعریف می‌شود.
درون تگ article از تگ a برای درج کردن لینک صفحه استفاده شده و متن لینک نیز عنوان صفحه‌ی فرزند است که توسط تابع the_title() وردپرس تعریف می‌شود. لینک نیز توسط تابع the_permalink() وردپرس استخراج شده و به عنوان href تگ a استفاده می‌شود.
در ادامه تگ div دیگری با کلاس child-post-image ساخته شده و درون آن با استفاده از تابع the_post_thumbnail وردپرس، تصویر شاخص در سایز متوسط یا medium قرار می‌گیرد. در واقع این تابع عکس را با تگ img درون div موردبحث، ایجاد می‌کند.
در نهایت تمام تگ‌های div و a و غیره، بسته می‌شود و حلقه‌ی foreach به پایان می‌رسد.

افزودن کد گالری به قالب وردپرس

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

منظور از Hook در وردپرس، فراخوانی تابع یا افزودن کدهایی در بخش موردنظر مثل Head صفحه، فوتر و بخش‌های جزئی‌تر مثل قبل یا بعد از محتوای پست و صفحه است.

برای سادگی کار، از هوک after_content یا پس از محتوای صفحه یا پست استفاده می‌کنیم تا گالری زیر صفحات قرار بگیرد. بنابراین با استفاده از دستور add_action وردپرس، تابعی به اسم tutpslus_list_current_child_pages را در بخش after_content هوک می‌کنیم.

add_action( 'after_content', 'tutpslus_list_current_child_pages' );

در این پروژه از قالب Twenty Sixteen وردپرس استفاده شده که اکشن هوکی به این صورت ندارد!‌ لذا به جای استفاده از روش فوق، تابع را مستقیماً در تمپلیت صفحات قرار می‌دهیم. به عبارت دیگر باید فایل page.php که تمپلیت پیش‌فرض صفحات است، ویرایش شود.

توجه: اگر قالب بروزرسانی شود، طبعاً می‌بایست یک بار دیگر فایل page.php یا هر فایل دیگری که ویرایش می‌کنید، از نو ویرایش شود و تابع فراخوانی شده، مجدداً در موقعیت صحیح اضافه شود.

بنابراین برای اطمینان بیشتر، یک کپی از فایل page.php تهیه کنید و سپس این فایل را برای ویرایش باز کنید. بخشی که می‌بایست گالری در آن قرار بگیرد را پیدا کنید و تابع موردبحث را که بدون آرگومان ورودی است، قرار دهید.

tutpslus_list_current_child_pages();

و نتیجه را در صفحه‌ی About Us یا درباره‌ی ما در قالب ۲۰۱۶ وردپرس ببینید:

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

انتشار گالری صفحات زیرمجموعه‌ی یک صفحه‌ی دلخواه در وردپرس

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

قبل از تغییر در تعریف صفحه‌ی مادر در تابع قبلی، دستور شرطی ابتدای تابع که برای چک کردن نوع صفحه اضافه شده بود را حذف کنید چرا که قرار است در ادامه شناسه‌ی یک Page را به عنوان صفحه‌ی مادر به تابع بدهیم و قطعاً با Post سروکار نداریم. دقت کنید که گیومه‌ی ابتدا و انتهایی که پس از دستور if ذکر شده را حذف کنید.

if ( is_page() ) {
 
}

و خط زیر را پیدا کنید:

$parentpage = get_the_ID();

و به جای آن، دستورات زیر را قرار بدهید و در ادامه می‌بایست به جای locations‌، آدرس صفحه را ذکر کنید:

$page = get_page_by_path( 'locations', OBJECT, 'page' );
     
$parentpage = $page->ID;

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

توجه کنید که می‌توانید تابع اول و دوم را با نام‌های متفاوت تعریف کرده و همین‌طور کلاس‌های CSS تگ‌هایی مثل div را متفاوت در نظر بگیرید تا استایل گالری در این دو تابع، متفاوت باشد.

در نهایت تابع جدید به این صورت خواهد شد:

function tutpslus_list_locations_child_pages() {
                 
    global $post;
     
    // define the page they need to be children of
    $page = get_page_by_path( 'locations', OBJECT, 'page' );
     
    $parentpage = $page->ID;
     
    // define args
    $args = array(
        'parent' => $parentpage,
        'sort_order' => 'ASC',
        'sort_column' => 'menu_order',
    );
     
    //run get_posts
    $children = get_pages( $args );
     
    if ( $children ) { ?>
     
        <div class="child-page-listing">
             
            <h2><?php _e( 'Our Locations', 'tutsplus' ); ?></h2>
         
            <?php //foreach loop to output
            foreach ( $children as $post ) {
                 
                setup_postdata( $post ); ?>
                 
                <article id="<?php the_ID(); ?>" class="location-listing" <?php post_class(); ?>>
                     
                    <?php if ( has_post_thumbnail() ) { ?>
                     
                        <a class="location-title" href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                         
                        <div class="location-image">  
                            <a href="<?php the_permalink(); ?>">
                                <?php the_post_thumbnail( 'medium' ); ?>
                            </a>
                        </div>    
                 
                    <?php }  ?>
                 
                </article>    
                 
            <?php } ?>
             
        </div>
         
    <?php }
             
}

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

و یک بار دیگر می‌بایست سراغ فایل‌های تمپلیت بروید و یا با روش اکشن هوک، گالری را در هر موقعیتی که لازم است، اضافه کنید. قبلاً به هر دو روش اشاره کردیم. به عنوان مثال می‌توانید از هوک before_footer که محتوا را قبل از فوتر اضافه می‌کند، استفاده کنید:

add_action( 'before_footer', 'tutpslus_list_locations_child_pages' );

و در عین حال می‌توانید فایل footer.php‌ قالب WordPress را باز کنید و تابع موردبحث را در محلی که مطلوب است، اضافه کنید. توجه کنید که تابع می‌بایست درون تگ شروع برنامه‌ی php و پایان آن قرار بگیرد و نه در بخش‌های HTML.

<?php tutpslus_list_locations_child_pages(); // list locations pages ?>

و در تصویر زیر نتیجه‌ی اضافه کردن گالری قبل از فوتر را مشاهده می‌کنید:

tutsplusسیاره‌ی ‌آی‌تی

سوالات و پاسخ‌ها و دیدگاه‌ها

معنی رنگ‌های مختلف چراغ کیس AirPods یا AirPods Pro چیست؟

نداگفت:

سلام من ایرپادم روش لاک خورده بود با پد پاک کردم پوست پوست شده چیکار باید بکنم

پاسخ

آشنایی با کش اسنپ‌چت و روش پاکسازی آن و مواردی که حذف می‌شود

مهساگفت:

سلام عکس هایی که تو گالری ذخیره کرده بودم خود به خود از گالری حذف شده و فقط عکس هایی که چند ساعت قبل تر به دلیل این که خذف کرده بودم و دوباره از اسنپ چت ذخیره کرده بودم باقی موندن (عکس های پاک شده به طور خودکار تو گالری ذخیره میشد)

آموزش خروج از اکانت سامسونگ در اندروید و روش ساخت اکانت و حذف آن

آواگفت:

سلام وقت بخیر چطور میتونیم اکانت سامسونگ را تغییر بدیم و جیمیل جدید وارد کنیم بدون اینکه دسترسی ها به برنامه ها قطع بشه؟

آموزش حذف کیبوردهای اضافی در ویندوز ۱۰ از تمام بخش‌ها

احمدگفت:

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