خلق رأس مستجيب في WordPress 3.4

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

الإصدار الجديد يجعله مرنًا ويقدم رمزًا أكثر سهولة ونظافة لهذا الخيار الشائع. بصفتنا مطوّري برامج ، يمكننا الآن الانتقال إلى ما هو أبعد من ذلك ، مع الأخذ في الاعتبار الحاجة إلى تحسين زائري الجوّال.

سابقا كانت أبعاد صورة الرأس محددة مسبقا وإدارتها مع HEADER_IMAGE_HEIGHT و HEADER_IMAGE_WIDTH تم اقتصاص الثوابت والملف الذي تم تحميله ليناسب هذه القيود. ولكن منذ الإصدار 3.4 ، تدعم صورة الرأس المخصصة العروض المرتفعة والارتفاع وتحررنا من هذه الثوابت البشعة. يبدو مثيرا للفضول ، أليس كذلك؟ دعونا نرى كيف يمكن القيام به.

ما سنحققه

بادئ ذي بدء ، يجب أن نقرر أي من تقنيات الصور المتجاوبة (التي نوقشت على نطاق واسع) والتي تناسبنا. يمكننا أن نحمل أنفسنا أي ترميز مخصص لهذه الصورة ، مع الأخذ في الاعتبار أهميتها بالنسبة للعلامة التجارية للموقع وفي نفس الوقت استقلالها عن هيكل أو ترميز آخر. من وجهة النظر هذه ، تبدو تقنية "noscript" واعدة حقًا. لتلخيص هذه التقنية ، يعمل على النحو التالي:

نحدد مراجع صور بديلة لنقاط التوقف المختارة كسمات بيانات لـ a

يجب أن يكون مصحوبًا بتصميم CSS مناسب وبرنامج نصي يضع صورة jQuery في العمل. وبصرف النظر عن ذلك نود أن يكون هناك مجموعة من الصور المحددة مسبقا ليتم اختيارها من (بنفس الطريقة التي لدينا في موضوع Twenty Eleven). علاوة على ذلك ، نود أن نمنح المستخدم القدرة على تحميل صورته الخاصة في لوحة المشرف. وبافتراض تحميل نسخة كاملة الحجم من الصورة ، سنقوم بإنشاء الأحجام الوسيطة اللازمة باستخدام دعم مصغرات WordPress المدمج مع أحجام مرنة للرأس. يجب أن يظهر رأسنا المخصص في النهاية على النحو التالي:

كفى كلام ، دعونا نغوص في الكود.

الخطوة 1: تسجيل رأس مخصص مع مظهرك

$default_url = get_template_directory_uri().'/_inc/img/city-large.jpg';$args = array('default-image'          => $default_url,'random-default'         => false,'width'                  => 1000,'height'                 => 300,'flex-height'            => true,'flex-width'             => true,'header-text'            => false,'default-text-color'     => '','uploads'                => true,'wp-head-callback'       => 'frl_header_image_style','admin-head-callback'    => 'frl_admin_header_image_style','admin-preview-callback' => 'frl_admin_header_image_markup',);add_theme_support('custom-header', $args);

هذا هو رمز تسجيل جديد قدم في وورد 3.4. تستطيع أن ترى مجموعة كاملة من المعلمات لذلك في مجموعة مخطوطات ولكن مهمتنا هي أهمها:

• default-image - رابط إلى الحجم الكامل للصورة الافتراضية في مجلد السمة
• width ، height - القيم القصوى التي يدعمها الموضوع لدينا
• flex-height ، flex-width - تعيين "صحيح" تسمح هذه المعلمات للصورة أن تكون ذات أحجام مرنة
• header-text - لن نعرض النص على الصورة في موضوعنا
• uploads - تمكين التحميلات في المشرف
• wp-head-callback - وظيفة ليتم استدعاؤها في قسم رئيس موضوع
• admin-head-callback - وظيفة ليتم استدعاؤها في قسم رأس الصفحة معاينة
• admin-preview-callback - وظيفة لإنشاء ترميز المعاينة في شاشة المشرف

إذا كنت قد استخدمت صورة رأس مخصصة في النسق الخاص بك من قبل وتتساءل عن كيفية مقارنة التقنيات ، فإليك قائمة بالمكافئات بين الثوابت القديمة والمعلمات الجديدة (مفاتيح المصفوفة):

HEADER_IMAGE        -> 'default-image'HEADER_IMAGE_WIDTH  -> 'width'HEADER_IMAGE_HEIGHT -> 'height'NO_HEADER_TEXT      -> 'header-text'HEADER_TEXTCOLOR    -> 'default-text-color'

الخطوة 2: تسجيل الصور الافتراضية للاختيار من بينها

في مثالنا ، سنقدم صورتين محددتين مسبقًا كخيارات للرأس ويجب أن يكون لكل منهما ثلاثة أشكال: -large.jpg ، -medium.jpg و -thumb.jpg للمدى المقابل لعروض النوافذ. كما سيتم استخدام أصغر حجم كصورة مصغرة في واجهة الإدارة.

register_default_headers(array('city' => array('url' => '%s/_inc/img/city-large.jpg','thumbnail_url' => '%s/_inc/img/city-thumb.jpg','description' => 'City'),'forest' => array('url' => '%s/_inc/img/forest-large.jpg','thumbnail_url' => '%s/_inc/img/forest-thumb.jpg','description' => 'Forest')));

إن الشفرة تفسر نفسها تمامًا ، والتفاصيل الوحيدة التي تتطلب الانتباه هي عنوان URL صحيح للصور: -large.jpg للحجم الكامل و -thumb.jpg للصورة المصغرة ( %s - عنصرًا نائبًا لمجلد الحدث النشط الذي سيتم استبداله تلقائيًا ببرنامج WordPress).

الخطوة 3: تسجيل أحجام صور إضافية

add_image_size('header_medium', 600, 900, false);add_image_size('header_minimal', 430, 900, false);

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

الخطوة 4: الترميز للواجهة الأمامية

function frl_header_image_markup(){/* get full-size image */$custom_header = get_custom_header();$large = esc_url($custom_header->url);$mininal = $medium = '';/* get smaller sizes of image */if(isset($custom_header->attachment_id)){ //uploaded image$medium_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_medium', false);if(isset($medium_src[0]))$medium = esc_url($medium_src[0]);$minimal_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_minimal', false);if(isset($minimal_src[0]))$mininal = esc_url($minimal_src[0]);}else{ //default image$medium = esc_url(str_replace('-large', '-small', $custom_header->url));$mininal = esc_url(str_replace('-large', '-thumb', $custom_header->url));}/* fallback for some unexpected errors */if(empty($medium))$medium = $large;if(empty($mininal))$mininal = $large;?>

مرة أخرى ، كل شيء واضح. مع ال frl_header_image_markup وظيفة نقوم بإنشاء الترميز اللازمة لعملنا استجابة للعمل. الجزء الأكثر إثارة للاهتمام هنا هو الحصول على عناوين URL للصور للحالات الكبيرة والمتوسطة والصغيرة. وظيفة وورد 3.4 get_custom_header إرجاع كائن رأس مخصص يحتوي على كافة البيانات الضرورية. إذا $custom_header لديه مجموعة بشكل صحيح attachment_id الملكية ، نحن نتعامل مع صورة تم تحميلها ويجب أن تستخدم أحجام وسيطة wp_get_attachment_image_src . إذا لم تكن هناك خاصية كهذه ، فنحن نتعامل مع واحدة من صورنا الافتراضية حتى نتمكن من الحصول على أحجام وسيطة بناءً على اصطلاح التسمية الخاص بنا.

مع frl_header_image_style نحن نحقق CSS وجافا سكريبت التي تجعل صورتنا سريعة الاستجابة. سيتم استدعاء هذه الوظيفة تلقائيًا لأننا حددناها كمعلمة تسجيل مخصصة للعناوين. لكن ال _markup يجب استدعاء وظيفة مباشرة في الموضوع - من الواضح في مكان ما داخل header.php

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

الخطوة 5: الترميز لمعاينة المشرف

تحت المظهر -> قائمة " الرأس " لدينا الآن شاشة ، تسمح لنا بتغيير صورة الرأس المخصصة باختيار واحدة من خيارات محددة مسبقًا أو تحميل صورة جديدة. سوف نلقي نظرة رأس بسيطة.

function frl_admin_header_image_markup() {$image = get_header_image();?>
#header-image {max-width: 1000px;max-height: 400px; }#header-image img {vertical-align: bottom;width: 100%;height: auto; }

نستخدم في admin حجم صورة واحد فقط (كامل) في الترميز الخاص بنا ونحصل على عنوان URL الخاص به مع get_header_image وظيفة ( frl_admin_header_image_markup مسؤولة عن ذلك). ولكن يجب علينا توفير تصميم مناسب للمعاينة بحيث تمثل السلوك المتجاوب ( frl_admin_header_image_style مسؤولة عن ذلك). سيتم استدعاء كلتا الوظيفتين تلقائيًا لأننا حددناها كمعلمات تسجيل رأس مخصصة. الآن يمكننا الاستمتاع بالحرية المطلقة ، وتحديد صورة رأس مخصصة.

كلمة تحذير

مع الحرية تأتي المسؤولية. إعطاء المستخدم المرونة لتحميل الصور المخصصة ليس لدينا سيطرة على حجم ونسب الصورة. إذا تجاوزت الصورة التي تم تحميلها حدود العرض والارتفاع التي قدمناها ، فيجب اقتصاصها. ولكن إذا حدث كل هذا في Live Theme Customizer الجديد بدلاً من شاشة المظهر Appearance -> Header ، فلن يتم اقتصاص صورة الرأس (على الأقل في الوقت الحالي). يعتبر Custom Theme Customizer ميزة جديدة تمامًا ، لذا يبدو من المحتمل أن تكون التحسينات المستقبلية ، ولكن في الوقت الحالي يجب أن نكون حذرين.

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

استنتاج

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

يمكنك تنزيل التعليمة البرمجية ونموذج الصور المستخدمة في هذه المقالة من هنا .


هل عملت مع رؤوس مخصصة في WordPress؟ ما هي التحسينات في الإصدار 3.4 التي تؤثر على طريقة عملك مع WordPress؟ انضم إلى المحادثة أدناه.