مقدمة للمطورين لموضوع Twenty Seventeen

مع إصدار وورد بريس 4.7 ، جاء أيضًا موضوع Twenty Seventeen الجديد . أكثر من كل سابقاتها ، السمة الافتراضية الجديدة قابلة للتخصيص بدرجة كبيرة لكل من المستخدمين والمطورين ، وهي سهلة الاستخدام ومناسبة تمامًا للأغراض الشخصية والمهنية. علاوة على ذلك ، إنه أمر رائع عندما يتعلق الأمر بأداء الموقع ، كما يشرح بريان في How to Score 100/100 في Google PageSpeed ​​Insights مع وورد بريس .

قمنا بمراجعة أحدث موضوع افتراضي Twenty Nineteen. إذا كنت مهتمًا بما هو جديد ، فقم بإلقاء نظرة على تحليلنا المتعمق:  مقدمة لموضوع Twenty Nineteen (Theming for Gutenberg)

يوفر موضوع Twenty Seventeen ثوبًا مثاليًا لميزات وورد بريس الجديدة المذهلة مثل رأس الفيديو القابل للتخصيص . علاوة على ذلك ، فإنه يوفر ميزات خاصة بالموضوع مثل أقسام الصفحة الأمامية ودعم رموز SVG وأيقونات التحرير المرئية في Customizer.

(قراءة مقترحة: مقدمة للموضوع العشرين )

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

موضوع فرعي لتعزيز وظائف الموضوع السابع والعشرين

سأفترض أنك على دراية بموضوعات وورد بريس الفرعية . إذا كنت بحاجة إلى تجديد معلومات ، خذ الوقت الكافي لقراءة موضوع وورد بريس Child – دليل البدء . عند الانتهاء ، قم بإنشاء مجلد جديد في / wp-content / theme / directory باسم فريد ومعروف مثل twentyseventeen-child . في هذا المجلد ، قم بإنشاء style.css التالي :

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://example.com/
 Description:  Twenty Seventeen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyseventeen-child
*/

يوفر رأس ورقة الأنماط التفاصيل المطلوبة حول السمة في شكل تعليقات. لا توجد علامات إضافية مطلوبة ، ولن نضيف إعلانات نمط مخصصة في أمثلةنا. بعد ذلك ، يتعين علينا سرد أوراق أنماط الوالدين والطفل. دعنا نضيف الوظيفة التالية إلى ملف function.php للقالب الفرعي:

function childtheme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', 
    get_template_directory_uri() . '/style.css' );

  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( 'parent-style' ),
    wp_get_theme()->get('Version')
  );
}
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );

دعنا ننشط السمة الفرعية ونبدأ في تخصيص Twenty Seventeen.

تخصيص رأس الصفحة الأولى

واحدة من أكثر الميزات جاذبية لموضوع Twenty Seventeen هو رأس ملء الشاشة في الصفحة الأولى. في قسم Customizer Header Media ، يمكنك تعيين صورة خلفية واحدة أو أكثر ، أو فيديو خلفية.

رأس الفيديو في موضوع سبعة عشر وعشرين

يسمح برنامج Twenty Seventeen بتخصيص الرأس من ملف function.php لموضوع فرعي ، وذلك بفضل مرشح twentyseventeen_custom_header_args . من خلال هذا المرشح يمكننا تمرير مصفوفة من الوسائط التالية إلى دالة رد نداء:

عنوان URL لصورة الخلفية ” افتراضي للصورة ” ( سلسلة ) ؛

لون ‘ default_text_color ‘ ( سلسلة ) لنص الرأس ؛

عرض الرأس ‘ width ‘ ( عدد صحيح ) (الافتراضي هو 2000) ؛

ارتفاع رأس ” الارتفاع ” ( عدد صحيح ) (الافتراضي هو 1200) ؛

الدعم المرن “للارتفاع المرن ” ( منطقي ) لارتفاع الرأس (الافتراضيات إلى ” صواب” ) ؛

دعم الفيديو ” video ” ( منطقي ) (الإعدادات الافتراضية على true ) ؛

‘ wp-head-callback ‘ ( سلسلة ) تستخدم وظيفة رد الاتصال لتصميم صورة الرأس والنص في المدونة (القيمة الافتراضية هي twentyseventeen_header_style )

كمثال ، دعنا نضيف الكود التالي إلى ملف الوظائف:

function my_custom_header_args( $args ) {
  $args['default-image'] = get_theme_file_uri( '/assets/images/header.jpg' );
  return $args;
}
add_filter( 'twentyseventeen_custom_header_args', 'my_custom_header_args' );

تم تقديم وظيفة get_theme_file_uri في وورد بريس 4.7 ، وتساعدنا كثيرًا في تطوير موضوع الطفل. تقوم الوظيفة أولاً بالبحث في السمة الفرعية للملف المحدد ، ثم تعود إلى السمة الأصلية إذا لم يتم العثور على ملف.

ملاحظة: لاستخدام get_theme_file_uri والوظيفة المصاحبة لها get_theme_file_path ، يجب أن تحترم القالب الفرعي بنية ملف الأصل.

إعداد ضوابط فيديو رأس مخصصة

فيديو الرأس هو ميزة أساسية في وورد بريس تم تعديلها بواسطة Twenty Seventeen بفضل مرشح وورد بريس header_video_settings . يمكننا تعديل هذه الإعدادات مرة أخرى ، وإرجاع قائمة مخصصة من الإعدادات من خلال الفلتر نفسه. دعنا نضيف الكود التالي إلى وظائف القالب الفرعي .php :

function childtheme_setup() {
  remove_filter( 'header_video_settings', 'twentyseventeen_video_controls' );
}
add_action( 'after_setup_theme', 'childtheme_setup' );

function childtheme_video_controls( $settings ) {
  $settings['l10n']['play'] = __( 'Play', 'twentyseventeen-child' );
  $settings['l10n']['pause'] = __( 'Pause', 'twentyseventeen-child' );
  return $settings;
}
add_filter( 'header_video_settings', 'childtheme_video_controls' );

أولاً ، قمنا بإزالة الدالة twentyseventeen_video_controls المرفقة بفلتر header_video_settings . بعد ذلك ، أضفنا عناصر تحكم الفيديو المخصصة الخاصة بنا. في هذا المثال ، استخدمنا كلمتين فقط ، لكنك فهمت الفكرة: يمكنك استخدام هذا المرشح لاستبدال الرموز الافتراضية برسوماتك المخصصة.

إضافة المزيد من الأقسام إلى الصفحة الأولى

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

خيارات الموضوع

يمكن تكوين أقسام الصفحة الأمامية في لوحة Customizer Theme Options

بشكل افتراضي ، يقبل Twenty Seventeen ما يصل إلى أربعة أقسام ، ولكن يمكننا إضافة عدد تعسفي من الأقسام بفضل مرشح twentyseventeen_front_page_sections . كمثال ، دعنا نضيف السطر التالي في ملف function.php للقالب الفرعي:

add_filter( 'twentyseventeen_front_page_sections', function(){ return 6; } );

تعرض الصورة أدناه لوحة Customizer Theme Options الجديدة.

أقسام إضافية

نسخة محسنة من لوحة خيارات الموضوع

إضافة المزيد من صور SVGs

يعد دعم رسومات SVG أحد أكثر الميزات إثارة للاهتمام في Twenty Seventeen. توفر السمة عددًا جيدًا من رموز SVG ، مجمعة في ملف /assets/images/svg-icons.svg sprite. يمكننا تقدير SVGs في قائمة الروابط الاجتماعية في تذييل الصفحة. يمكننا استبدال هذه الرموز أو إضافة أيقوناتنا الاجتماعية المخصصة بفضل الوظيفة الأساسية get_theme_file_path وفلتر twentyseventeen_social_links_icons .

عشرون سبعة عشر تذييل

عشرون سبعة عشر تذييل

لنفترض أنك ترغب في إضافة رابط إلى صفحة مشروع Kickstarter المذهلة ، لكن Twenty Seventeen لا يوفر رمز SVG المقابل.

تحتاج أولاً إلى ملف SVG sprite مخصص مثل ما يلي:

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-kickstarter" viewBox="0 0 16 16">
<path d="M6.406 5.453L9.34 1.2C9.895.4 10.61 0 11.49 0c.715 0 1.335.254 1.86.762.522.51.784 1.117.784 1.826 0 .523-.138.986-.416 1.386L11.073 7.82l3.235 4.102c.323.408.485.886.485 1.433 0 .724-.254 1.345-.763 1.865-.508.52-1.124.78-1.848.78-.793 0-1.398-.258-1.814-.774l-3.962-4.944v2.726c0 .778-.135 1.383-.405 1.814C5.51 15.607 4.8 16 3.86 16c-.855 0-1.518-.29-1.987-.866-.44-.532-.66-1.237-.66-2.114V2.91c0-.83.224-1.516.67-2.055C2.348.285 2.995 0 3.82 0c.786 0 1.44.285 1.964.855.292.316.477.635.554.96.047.2.07.572.07 1.12v2.518z"/>
</symbol>
</defs>
</svg>

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

الآن علينا تضمين كائن SVG الجديد في الصفحة من ملف وظائف القالب الفرعي:

function childtheme_include_svg_icons() {
  // Define SVG sprite file.
  $custom_svg_icons = get_theme_file_path( '/assets/images/svg-custom-icons.svg' );

  // If it exists, include it.
  if ( file_exists( $custom_svg_icons ) ) {
    require_once( $custom_svg_icons );
  }
}
add_action( 'wp_footer', 'childtheme_include_svg_icons', 99999 );

هذه الوظيفة تشبه إلى حد كبير وظيفة twentyseventeen_include_svg_icons المقابلة المحددة في ملف Twenty Seventeen’s functions.php . الاختلاف الرئيسي هو أننا في وظيفتنا المخصصة نستخدم get_theme_file_path للحصول على ملف SVG للقالب الفرعي .

أخيرًا ، يمكننا إلحاق رمز Kickstarter الخاص بنا بمجموعة أيقونات الروابط الاجتماعية المدعومة:

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

function childtheme_social_links_icons( $social_links_icons ) {
  $social_links_icons['kickstarter.com'] = 'kickstarter';
  return $social_links_icons;
}
add_filter( 'twentyseventeen_social_links_icons', 'childtheme_social_links_icons' );

أضف عنصر Kickstarter إلى قائمة الروابط الاجتماعية وانتقل إلى تذييل الصفحة لتقدير نتيجة عملنا.

كيك ستارتر

قائمة الروابط الاجتماعية المخصصة

بناء موقع إلكتروني قابل للتمرير من صفحة واحدة

حتى إذا كان موضوع Twenty Seventeen يوفر صفحة أمامية متعددة الأقسام ، فإن التمرير المتحرك ليس ميزة. يستخدم السمة المكون الإضافي jQuery ScrollTo لإنشاء تأثير تمرير متحرك. لسوء الحظ ، لا يتم تنشيط الرسم المتحرك إلا عندما ينقر المستخدم على سهم التنقل لأسفل ، ولا يكون متاحًا لعناصر القائمة. لكننا مطورين ويمكننا منح Twenty Seventeen المزيد من الصلاحيات. لذلك ، في هذا المثال الأخير ، سنقوم بتوسيع وظيفة التمرير المتحركة بحيث يمكن لمسؤول الموقع إنشاء موقع ويب متحرك من صفحة واحدة.

قائمة التنقل في موضوع سبعة عشر وعشرين

عندما ينقر المستخدم على أيقونة السهم في قائمة التنقل ، تنتقل الصفحة الأولى إلى قسم الصفحة الأولى

في نسق Twenty Seventeen ، يتم التحكم في تأثير الرسوم المتحركة بواسطة ملف global.js ، الموجود في المجلد / الأصول / js / . لذا ، فإن مهمتنا الأولى هي نسخ global.js ولصقه من موقعه الأصلي إلى المجلد المقابل للقالب الفرعي .

هيكل الملف

هيكل ملف الموضوع الفرعي

الآن يمكننا البدء في البرمجة. لإنجاز هذه المهمة fnal ، نحن سنفعل

إجبار وورد بريس على تحميل ملف global.js الخاص بالقالب الفرعي بدلاً من ملف الأصل الأصلي ،

إضافة فئة CSS معينة إلى روابط القائمة ،

أضف معرفًا لكل قسم في الصفحة الأولى ،

تعديل ملف global.js للحصول على تأثير الحركة.

1. إجبار وورد بريس على تحميل  ملف global.js الخاص بالقالب الفرعي

دعنا نعدل وظيفة childtheme_enqueue_styles المحددة في مثالنا الأول على النحو التالي:

هل تعاني من مشاكل التوقف و وورد بريس؟ Kinsta هو حل الاستضافة المصمم لتوفير الوقت! تحقق من ميزاتنا

function childtheme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( 'parent-style' ),
    wp_get_theme()->get('Version')
  );

  if( is_front_page() ){
    wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '1.0', true );
  }
}
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );

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

2. إضافة فئة CSS إلى ارتباطات القائمة

من أجل إضافة فئة CSS إلى القائمة من العناصر، يمكننا استخدام nav_menu_link_attributes التصفية. أضف الكود التالي في jobs.php:

function childtheme_theme_menu_class($atts, $item, $args) {
  if( is_array( $atts ) ) {
    $atts['class'] = 'nav-menu-scroll-down';
  }
  return $atts;
}
add_filter('nav_menu_link_attributes','childtheme_theme_menu_class', 0,3);

سيتغير ترميز عنصر القائمة على النحو التالي:

<li id="menu-item-96" class="sections menu-item menu-item-type-custom menu-item-object-custom menu-item-96">
  <a href="/kinsta/#section-1" class="nav-menu-scroll-down">Section 1</a>
</li>

الآن يمكننا بسهولة تحديد أي رابط قائمة من نص برمجي.

3. إضافة معرفات إلى أقسام الصفحة الأولى

من أجل جعل الصفحة قابلة للتمرير ، يتعين علينا إنشاء أهداف ارتباط القائمة من خلال توفير سمة معرف لكل قسم. انسخ والصق ملف المحتوى الأصلي للصفحة الأولى panel.php من / template-parts / page / في نفس مجلد النسق الفرعي . ثم انتقل إلى السطر 30 وقم بتغييره على النحو التالي:

<div class="panel-content" id="<?php echo get_post()->post_name; ?>">

تحتوي أقسام الصفحة الأولى الآن على معرّفات تسمح لنا باستهدافها من قائمة التنقل. فيما يلي الترميز الجديد لأغلفة الأقسام:

<div class="panel-content" id="section-1">...</div>

لاحظ أن قيمة سمة المعرف ستكون دالة النشر اللاحقة.

التنقل

تُظهر الصورة عنوان URL لرابط القائمة

4. تعديل ملف global.js

الآن لنفتح ملف global.js للقالب الفرعي ونعلن عن المتغير التالي:

$navMenuScrollDown = $body.find( '.nav-menu-scroll-down' ),

انتقل إلى السطر 213 وأضف الكود التالي:

$navMenuScrollDown.click( function( e ) {
  // grab target URL
  var url = $(this).attr("href");
  // get # position
  var index = url.indexOf("#");
  if(index  == -1){
    return;
  }
  // extract the target id value
  var targetId = url.substring(index);

  e.preventDefault();
  // remove classes from any menu list items
  $("a[href*='#']").parent().removeClass("current-menu-item current_page_item");
  // add classes to current menu item
  $(this).closest("li").addClass("current-menu-item current_page_item");

  // scroll down
  $( window ).scrollTo( targetId, {
    duration: 800,
    offset: { top: menuTop - navigationOuterHeight }
  });
}); 

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

قم بتنزيل هنا موضوع الطفل الذي تم تطويره في هذا المنشور.

تغليف

تعد وسائط الرأس وأقسام الصفحة الأمامية و SVGs من أكثر الميزات إثارة التي يوفرها موضوع Twenty Seventeen لمشرفي الموقع لإعداد مواقع الويب الشخصية والمهنية بسهولة. لكن موضوع Twenty Seventeen هو أيضًا أداة رائعة للمطورين ، وذلك بفضل عدد كبير من المرشحات التي يمكن استخدامها في السمات الفرعية لتخصيص شكل ومظهر أي موقع ويب. هل قمت ببناء قالب Twenty Seventeen child بعد؟ هل تقترح أي فكرة أخرى لتحسين الوظائف الافتراضية؟

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

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