كيفية إنشاء معرض ألبوم صور في WordPress بدون البرنامج المساعد

في هذه المقالة ، سنوضح لك كيفية إنشاء معرض لألبوم الصور في WordPress بدون مكون إضافي.

نعلم جميعًا أنه مع المكونات الإضافية في WordPress ، لا يوجد شيء مستحيل تحقيقه.

ولكن كلما زاد عدد المكونات الإضافية التي تستخدمها ، زاد تدهور أداء موقع الويب الخاص بك.

بالنسبة لأي موقع ويب ، يلعب المعرض دورًا مهمًا للغاية.

إذا كان معرض الصور الخاص بك يتضمن أعمالًا وفلاتر معقدة ، فقد يتعرض أداء موقع الويب العام إلى الضربات.

من المفترض أن يحتوي معرض ألبوم الصور على عدة صور مقيمة بداخله.

نحن هنا نقوم بإنشاء ألبوم شهري بحيث يحتوي كل ألبوم على صورة غلاف وعندما يتم النقر فوق صورة الغلاف ، يأخذك داخل الألبوم للتحقق من كل صورة على حدة.

تحتاج أيضًا إلى معرفة كيفية إنشاء معرض لألبوم الصور في WordPress بدون مكون إضافي للقيام بمهام معقدة تحتاج إليها لشراء مكون إضافي مميز إذا كنت تريد استخدام مكون إضافي.

بالإضافة إلى ذلك ، يمكنك استخدام أحد برامج تحرير الصور هذه لتحرير الصور التي سيتم إرفاقها بمعرض ألبوم الصور الخاص بك.

خطوات إنشاء معرض لألبوم الصور في WordPress بدون إضافة

يمكن تنفيذ جميع الميزات المطلوبة لتحقيق الغرض باستخدام الوظائف المضمنة في WordPress. اعتبر كل ألبوم شهري منشورًا بصفحته الفردية. ضع في اعتبارك كل صورة داخل الألبومات كمرفق بصفحة فردية خاصة به.

ستحتاج الألبومات إلى صورة مصغرة ، والميزة مضمنة في WordPress. إذا كان موقع الويب الخاص بك هو موقع ويب لمصور فوتوغرافي ، فيمكنك تحويل مشاركاتك الافتراضية إلى ألبوم. عدا ذلك ، يجب عليك إنشاء نوع منشور مخصص.

إنشاء مكون إضافي خاص بالموقع (غير جاهز) ونوع منشور مخصص

تحتاج إلى إنشاء مكون إضافي خاص بالموقع لا يعتمد على قالبك. إنها مفيدة لإنشاء أنواع منشورات مخصصة وإضافة رموز قصيرة وعرض الصور المصغرة وبالمثل. لإنشاء مكون إضافي خاص بالموقع ، يجب عليك الانتقال إلى دليل المكونات الإضافية باستخدام FTP.

ضمن wp-content / plugins / قم بإنشاء مجلد جديد وقم بتسمية المجلد بنفس اسم المكون الإضافي الذي تريد إنشاءه. انتقل إلى داخل المجلد وأنشئ ملف php بنفس اسم المجلد. الصق الكود التالي داخل الملف.

/ *
اسم البرنامج المساعد: Site Plugin for website.com
الوصف: تغييرات التعليمات البرمجية الخاصة بالموقع لموقع website.com
* /
/ * ابدأ في إضافة وظائف أسفل هذا السطر * /
/ * إيقاف إضافة وظائف أسفل هذا السطر * /

احفظ الملف واخرج. الكود المذكور أعلاه ليس له أي معنى ، وسيتم استبداله عند إنشاء نوع المنشور المخصص.

قم بإنشاء رمز نوع المنشور المخصص من WordPress Custom Post Code Code Generator.

عرض أحجام صور إضافية وحقول إضافية-

من لوحة تحكم المسؤول ، انتقل إلى المظهر ثم إلى المحرر. حدد ملف وظائف .php وأضف الكود التالي لتسجيل حجم صورة إضافي لعرض الشبكة.

add_image_size ('Album-grid'، 225، 150، true) ؛

إذا كنت ترغب في إضافة حقول مخصصة إضافية إلى Media Uploader مثل اسم المصور وصفحاتهم ومعلومات أخرى عند تحميل صورة ، فأنت بحاجة إلى إضافة الكود التالي في function.php.

/ **
 * أضف حقول اسم المصور وعنوان URL إلى برنامج تحميل الوسائط
 *param $ form_fields array ، الحقول المطلوب تضمينها في نموذج المرفقات
 *param $ post object، مرفق سجل في قاعدة البيانات
 *return $ form_fields ، حقول النموذج المعدلة
 * /

دالة be_attachment_field_credit ($ form_fields ، $ post) {
    $ form_fields ['be-photographer-name'] = المصفوفة (
        'label' = 'اسم المصور'،
        "الإدخال" = "نص" ،
        'value' = get_post_meta ($ post-ID، 'be_photographer_name'، true) ،
        'help' = 'إذا تم توفيرها ، فسيتم عرض صورة فوتوغرافية' ،
    ) ؛
    $ form_fields ['be-photographer-url'] = مجموعة (
        'label' = 'URL المصور'،
        "الإدخال" = "نص" ،
        'value' = get_post_meta ($ post-ID، 'be_photographer_url'، true) ،
        'help' = 'Add Photographer URL'،
    ) ؛
    إرجاع form_fields دولار؛
}
add_filter ('attachment_fields_to_edit'، 'be_attachment_field_credit'، 10، 2) ؛

/ **
 * حفظ قيم اسم المصور وعنوان URL في برنامج رفع الوسائط
 *param $ post array ، البيانات اللاحقة لقاعدة البيانات
 *param $ attachment array ، حقول المرفقات من نموذج $ _POST
 *return $ post array ، بيانات النشر المعدلة
 * /
دالة be_attachment_field_credit_save ($ post، $ attachment) {
    if (isset ($ attachment ['be-photographer-name']))
        update_post_meta ($ post ['ID']، 'be_photographer_name'، $ attachment ['be-photographer-name'])؛
    إذا (isset ($ attachment ['be-photographer-url']))
update_post_meta ($ post ['ID']، 'be_photographer_url'، esc_url ($ attachment ['be-photographer-url']))؛
    العودة $ آخر؛
}
add_filter ('attachment_fields_to_save'، 'be_attachment_field_credit_save'، 10، 2) ؛

كما ترى ، ستضيف حقلين نصيين في Media Uploader وهما اسم المصور وعنوان URL الخاص بالمصور.

إنشاء صفحات لعرض كافة الألبومات

حان الوقت الآن لإنشاء بعض الألبومات (أنواع المنشورات المخصصة) وإضافة الصور إليها. ستكون الصورة المميزة هي صورة غلاف الألبوم. سيصبح المحتوى الذي تضيفه إلى منطقة المحتوى في المنشور هو وصف الألبوم.

قالب الصفحة للألبومات

قم بإنشاء ملف وقم بتسميته archive-albums.php. انسخ رمز الرأس والتذييل والشريط الجانبي وعناصر واجهة المستخدم الأخرى والصقها. الصق الكود التالي فيه لإظهار كل الألبومات في صفحة واحدة.

<li class = "Album-grid"> a href = "title =" "</a> </li>
post_type == 'albums' $ post-post_status == 'publish') {
        المرفقات $ = get_posts (مجموعة (
            'post_type' = 'مرفق' ،
            "posts_per_page" = -1 ،
            'post_parent' = معرف النشر بالدولار ،
            'استبعاد' = get_post_thumbnail_id ()
        )) ؛
        إذا ($ attachments) {
            foreach (مرفقات $ كـ $ attachment) {
                $ class = "post-attachment mime-". sanitize_title ($ attachment-post_mime_type) ؛
                $ title = wp_get_attachment_link ($ attachment-ID، 'Album-grid'، true)؛
                صدى '<li class = "'. $ class. 'Album-grid">'. العنوان. "</li>" ؛
            }           
        }
    }

ضع الكود التالي في ملف CSS الرئيسي لموضوعك بحيث تظهر صور الغلاف في شبكة.

.album-grid {width: 225px؛ الارتفاع: 150 بكسل ؛ تعويم: اليسار؛ نمط القائمة: لا شيء ؛ نوع نمط القائمة: لا شيء ؛ الهامش: 0 18px 30px 0px؛}

صفحة نموذجية لكل صورة

قم بإنشاء ملف وقم بتسميته single-attachments.php. انسخ كل الكود من ملف single.php المصمم مسبقًا للموضوع. يمكنك العثور عليه ضمن محرر من قائمة المظهر. ثم ابحث عن رمز الحلقة في ملف single-attachments.php واستبدل هذا القسم بما يلي.

إذا (have_posts ()): while (have_posts ()): the_post () ؛

$ photographer = get_post_meta ($ post-ID، 'be_photographer_name'، true)؛

$ photographerurl = get_post_meta ($ post-ID، 'be_photographer_url'، true)؛

<h1> the_title () ؛ </h1>
<div class = "photometa"> <span class = "photographername"> echo $ photographer؛ </span> // <a href=" echo $photographerurl "target="_blank" class="photographerurl" rel="noopener noreferrer"> echo $ photographerurl </a> </div>
                        <div class = "entry-attachment">
 if (wp_attachment_is_image ($ post-id)): $ att_image = wp_get_attachment_image_src ($ post-id، "full")؛ 
                        <p class = "attachment"> <a> id) ؛ "العنوان =" the_title () ؛ "rel =" attachment "<img src =" echo $ att_image [0]؛ "width =" echo $ att_image [1]؛ "height =" echo $ att_image [2]؛ "class =" attachment-medium "> post_excerpt ؛ " / </a>
                        </p>
 آخر :
                        <a> ID) "title =" echo wp_specialchars (get_the_title ($ post-ID)، 1) "rel =" attachment "echo basename ($ post-gu) </a>
 إنهاء إذا؛ 
                        </div>
 في غضون ذلك 
 إنهاء إذا؛