خمس طرائق لإجراء تعديلات على قالب Twenty Seventeen في ووردبريس

قالب Twenty Seventeen هو أكثر قالب افتراضي تعددًا في الاستخدامات شهدته ووردبريس. لكن الخيارات التي يُتيحها هذا القالب ليس شاملة، وهنالك بعض الأمور التي قد نرغب بفعلها والتي لا يسمح القالب بها.

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

• التعديل الأول: «كيفية إنشاء قائمة تحتوي روابط للمواقع الاجتماعية».
• التعديل الثاني: «كيفية تغيير عبارة “Proudly powered by WordPress” (أو مثيلتها بالعربية: “مدعوم بواسطة WordPress”)».
• التعديل الثالث: «إنشاء قائمة تنقّل بين أقسام الصفحة الرئيسية».
• التعديل الرابع: «إضافة شريط جانبي مخصص لكل قسم من أقسام الصفحة الرئيسية».
• التعديل الخامس: «كيفية إضافة صورة بارزة كبيرة جدًا لكل صفحة أو منشور».

بعد انتهائنا من إجراء التعديلات السابقة، فسنحوِّل قالب Twenty Seventeen إلى موقعٍ جميلٍ وعصريٍ مناسب تمامًا للشركات أو للمدونات. ألا تصدقني؟ ألقِ نظرةً إلى الصورة الآتية، فهذه هي النتيجة المرجوة إذا اتبعت التعديلات التي سنوردها جميعها (صورة متحركة):

التعديل الأول: إنشاء قائمة تحتوي روابط للمواقع الاجتماعية

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

المشكلة هي أنَّ العديد من المستخدمين قد اشتكوا من عدم قدرتهم على اكتشاف طريقة إضافة روابط الشبكات الاجتماعية إلى هذه القائمة، لكن لا تقلق فالأمر بسيطٌ جدًا بعد أن تتعلم طريقة فعله.
كل ما عليك فعله هو إضافة قائمة فيها روابط إلى شبكات التواصل الاجتماعي وإسنادها إلى موضع «Social Links Menu» (أو «قائمة الروابط الاجتماعية» باللغة العربية).
هذه هي الخطوات بالتفصيل:

• ابدأ بفتح المخصِّص من «Appearance > Customize» (مظهر > تخصيص)
• اضغط على خيار «Menus» (قوائم) ثم اضغط على زر «Add a Menu» (أضف قائمة)
• سمِّ القائمة باسمٍ واضحٍ دالٍ على وظيفتها مثل «Social Links Menu» ثم اضغط على زر «Create Menu» (إنشاء قائمة)
• فعِّل مربع الاختيار المجاور لعبارة «Social Links Menu» ( قائمة الروابط الاجتماعية) في قسم «Display Location» (عرض الموقع)

بعد أن تنتهي من ضبط القائمة، فيجب أن تبدو كما في الصورة الآتية:

آخر خطوة هي الضغط على زر «Save & Publish» (حفظ ونشر) في المُخصِّص لحفظ القائمة الجديدة. يجب أن تظهر قائمة الروابط الاجتماعية الآن في تذييل الصفحة.
أنا متأكد أنَّ ما سبق ليس صعبًا أبدًا، لذا لننتقل إلى أمرٍ أكثر صعوبةً!

التعديل الثاني: تغيير عبارة «Proudly powered by WordPress»

هنالك سببان يدفعانك إلى تغيير النص الموجود في تذييل الصفحة الذي يقول «Proudly powered by WordPress» أو «مدعوم بواسطة WordPress»:

• ربما تريد الإضافة إلى الجملة السابقة لتقول «مدعوم بواسطة WordPress، ومُصمَّم من شركة WebPress Designs، ومُستضاف من شركة LAMPress!».
• ربما تريد وضع عبارة أخرى لتصرِّح عن حقوق النشر الخاصة بموقعك مثل «جميع الحقوق محفوظة 2016، شركة MyBiz».

وبغض النظر عن السبب الذي دفعك لتغيير هذه العبارة، فسأخبرك طريقة تعديلها في هذا القسم.
أوّل شيءٍ عليك فعله هو إنشاء وتفعيل قالب ابن (Child theme) (ملاحظة: إذا أردت حلًا سهلًا جدًا، فكل ما عليك فعله هو تنزيل القالب الابن الذي سنعطيك إياه في نهاية هذا الدرس).
بعد إنشائك وتفعيلك للقالب الابن، فانسخ ملف footer.php من قالب Twenty Seventeen إلى مجلد القالب الابن، ثم افتح ملف footer.php المنسوخ وابحث عن السطر get_template_part( 'template-parts/footer/site', 'info' );‎.
لديك خياران الآن: إما أن تجعل السطر السابق تعليقًا (بإضافة // قبل الشيفرة) مما يؤدي إلى حذف تلك العبارة فقط، وإما أن تجعله تعليقًا ثم تضيف النص الخاص بك. هذه هي الشيفرة التي استخدمتها لإنشاء التذييل المعروض في الصورة السابقة:

التعديل الثالث: إنشاء قائمة تنقّل بين أقسام الصفحة الرئيسية

في أحد الدروس السابقة «تخصيص قالب Twenty Seventeen في ووردبريس ليناسب الشركات» أضفتُ سكربت jQuery بسيط لبناء قائمة تنقل ديناميكية ضمن الصفحة الرئيسية والتي يوجد فيها روابط لمختلف أقسام الصفحة الرئيسية. ولقد أدى السكربت السابق عمله كما ينبغي، لكنه كان يحتاج إلى بعض التحسينات.
سأريك في هذا الدرس كيفية تحسينه؛ فبالإضافة إلى إنشاء قائمة تنقل لمختلف أقسام الصفحة الرئيسية، فسنحاول أيضًا حلّ مشكلة تأثير المرور فوق عناصر القائمة، وإضافة تأثير التمرير السلس (smooth scrolling) لتحسين تجربة المستخدم.
لنبدأ أولًا بشيفرة jQuery التي عليك إضافتها إلى موقعك:

/*
 One page nav code 
 */

jQuery( document ).ready(function(){
  /* Add padding and id's to each front page section */
  jQuery( "h2.entry-title" ).each( function() {
    var panelId = jQuery( this ).html().toLowerCase().replace(/\s+/g, "-");
      jQuery( this ).wrapInner(function() {
        return "<span style='padding-top:96px;' id='" + panelId + "'></span>";
      })
  })

  /* Remove navigation link highlighting */
    jQuery('#top-menu li').removeClass('current-menu-item current_page_item ');

  /* Add highlighting on click */
    jQuery('#top-menu li a').on('click', function(event) {
    jQuery(this).parent().parent().find('li').removeClass('current-menu-item');
    jQuery(this).parent().addClass('current-menu-item');
  });

    /* Check current URL and highlight nav for current page */
  jQuery('#top-menu li a').each( function() {
      var pageUrl = jQuery( location ).attr( 'href' );
      var navUrl = jQuery( this ).attr( 'href' );
      if ( navUrl == pageUrl ) {
          jQuery( this ).parent().addClass('current-menu-item');
        } 
    })
})

يمكنك إضافة هذه الشيفرة إلى ملف JavaScript الذي يُحمِّله القالب الابن (وهذا ما فعلتُ) أو يمكنك استخدام إضافة تسمح لك بإضافة شيفرات JavaScript إلى موقعك (وهذا ما نصحتك بفعله في درسي السابق)؛ لكن احرص على تحميل الشيفرة بعد انتهاء تحميل مكتبة jQuery.
لم يتغيّر أوّل جزء من الشيفرة وبقي كما هو مذكور في الدرس السابق، أما بقية الشيفرة فتحل مشكلة تأثير المرور فوق عناصر القائمة. ألقِ نظرةً على التعليقات الموجودة في الشيفرة السابقة لتأخذ فكرةً عمّا يجري.
إضافةً إلى ما سبق، سنجعل حركة الانتقال إلى كل قسم من أقسام الصفحة أكثر سلاسةً بتثبيت وتفعيل إضافة مجانية باسم jQuery Smooth Scroll.
طبعًا ما يزال عليك بناء قائمة التنقل بإضافة روابط مخصصة إلى كل قسم من أقسام الصفحة عبر استعمال اسم الصفحة المعروضة في ذاك القسم.
فمثلًا، لإضافة رابط إلى قسم «About» فعليك إنشاء رابط مخصص وجعله يشير إلى ‎#about. لتفاصيل كاملة رجاءً ارجع إلى درس «تخصيص قالب Twenty Seventeen في ووردبريس ليناسب الشركات».
أعلم أنَّ إنشاء هذه القائمة يتطلب وقتًا، لكن هذا الجهد سيؤتي أكله. لم تقتنع بكلامي؟ انظر إلى النتيجة النهائية (صورة متحركة):

التعديل الرابع: إضافة شريط جانبي مخصص لكل قسم من أقسام الصفحة الرئيسية

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

وبالطبع لا ترغب بإظهار نفس الودجات في قسم «About»؛ وإنما تريد إضافة شيءٍ آخر في ذاك القسم، ومن المحبَّذ إظهار شريط جانبي في قسم About في الصفحة الرئيسية وإظهار شريط جانبي آخر في صفحة ‎/about نفسها!
أود أن أبشِّرَك بإمكانية فعل ذلك، حيث تستطيع إضافة شريط جانبي مخصص لكل قسم من أقسام الصفحة الرئيسية ثم إعادة استخدام تلك الأشرطة الجانبية –أو إنشاء أشرطة جانبية مختلفة تمامًا– في صفحات موقعك. لكن هذا التعديل ليس سهلًا، حيث سنحتاج إلى تعديل القالب الابن وسيلزمنا استخدام إضافة.
افتراضيًا، لا يُضيف قالب Twenty Seventeen أيّة أشرطة جانبية إلى أقسام الصفحة الرئيسية أو إلى أيّة صفحات. وإنما سيعرض شريطًا جانبيًا في المنشورات فقط، لكن الصفحات ستبدو وكأنها خاويةٌ لكثرة المسافات البيضاء.
لكي نغيّر ذلك ولإضافة أشرطة جانبية إلى الصفحات، فعليك القيام بعدِّة أمور:

• نسخ ملفات القالب التي يستعملها Twenty Seventeen لعرض الصفحات وأقسام الصفحة الرئيسية.
• إضافة شيفرة الشريط الجانبي إلى قالب الصفحات وإلى كل قسم من أقسامٍ الصفحة الرئيسية عبر تعديل ملفات القالب.
• تثبيت إضافة Custom Sidebars.
• إنشاء شريط جانبي مخصص لكل قسم من أقسام الصفحة الرئيسية، ولكل صفحة نريد عرض الشريط الجانبي فيها.
• إضافة شريط جانبي لكل صفحة تريد عرضه فيها.

دعني أريك كل خطوة على حدة.
- الخطوة الأولى: نسخ ملفات content-page.php و content-front-page.php و content-front-page-panels.php إلى مجلد القالب الابن.
ستجد الملفات السابقة في مجلد ‎\wp-content\themes\twentyseventeen\template-parts\page وعليك نسخها جميعها.
ستحتاج إلى إعادة إنشاء نفس بنية المجلدات السابقة في مجلد القالب الابن بإنشاء مجلد جديد باسم template-parts ثم إنشاء مجلد جديد آخر داخله باسم page. ثم لصق الملفات الثلاثة السابقة في مجلد page.
بعد انتهاء العملية السابقة، فيجب أن تبدو بنية مجلدات القالب الابن لديك كما يلي:

• الخطوة الثانية: إضافة شيفرة الشريط الجانبي إلى كل ملف من الملفات السابقة.
  افتح بدايةً ملف content-page.php وأضف ‎<?php get_sidebar(); ?>‎ قبل وسم إغلاق العنصر header مباشرةً كما يلي:

ثانيًا، افتح الملفين الآخرين (content-front-page.php و content-front-page-panels.php) وأضف الشيفرة الآتية قبل وسم إغلاق العنصر header مباشرةً في كلاهما:

<hr>
<div class="front-page-sidebar">
  <aside id="secondary" class="widget-area" role="complementary"><?php
  $title = get_the_title();
  dynamic_sidebar( $title );
  ?></aside>
</div>

بعد إضافة الشيفرة السابقة، فيجب أن يبدو كل من الملفين content-front-page.php و content-front-page-panels.php كما يلي (بعد إضافة الشيفرة الضرورية):

• الخطوة الثالثة: تثبيت إضافة Custom Sidebars
  إضافة Custom Sidebars المجانية متاحةٌ في موقع WordPress.org، لذا يمكنك البحث عن الكلمة المفتاحية «Custom Sidebars» في صفحة «Plugins > Add New» (إضافات > أضف جديد).
• الخطوة الرابعة: إنشاء شريط جانبي مخصص لكل قسم من أقسام الصفحة الرئيسية.
  اذهب إلى «Appearance > Widgets» (مظهر > ودجات) لإنشاء شريط جانبي جديد لكل قسم من أقسام الصفحة الرئيسية.
  انتبه الآن جيدًا لما سنفعله، لأنَّ من المهم جدًا أن تقوم بهذه العملية على أتم وجه لكي تُعرَض صفحتك الرئيسية كما يجب. اتبع الخطوات الآتية لإنشاء الأشرطة الجانبية:
  1. اضغط على زر «Create a new sidebar» (للأسف، لا توفر إضافة Custom Sidebars ترجمةً عربيةً لها)، وسمِّ كل شريط جانبي بنفس اسم الصفحة تمامًا؛ فمثلًا، لو كان أحد أقسام الصفحة الرئيسية يَعرِض صفحةً عنوانها «About» فعليك حينئذٍ أن تُنشِئ شريطًا جانبيًا بنفس الاسم: «About».
     
     الشيفرة التي أضفناها في الخطوة الثانية إلى قوالب الصفحة الرئيسية ستبحث عن مطابقة بين اسم القسم وبين اسم الشريط الجانبي لكي تعلم ما هو الشريط الجانبي الذي يجب عرضه.
  2. اضغط على «Advanced – Edit custom wrapper code» وأضف الشيفرة الآتية:
     • في الحقل الأول «Before Title» أضف <h2 class="widget-title"‎>
     • في الحقل الثاني «After Title» أضف <‎/h2>
     • في الحقل الثالث «Before Widget» أضف <section id="%1$s" class="widget %2$s"‎>
     • في الحقل الرابع «After Widget» أضف <‎/section>

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

Quote

لا تَعمَل ودجت «Recent Posts» (أحدث المقالات) مع هذه الطريقة، وإذا أضفتها إلى أيّ شريط جانبي مخصصٍ من الأشرطة المعروضة بجوار أقسام الصفحة، فستلاحظ أنَّ القسم الذي سيعرضها سيُحمِّل محتوى الصفحة الرئيسية بدلًا من المحتوى المخصص.

• الخطوة الخامسة: إضافة شريط جانبي لكل الصفحات التي تريد عرض شريط جانبي فيها.

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

مرِّر إلى الأعلى واضغط على زر «Update» (تحديث) ثم اعرض الصفحة، وستلاحظ أنَّ الشريط الجانبي معروضٌ تحت عنوان الصفحة:

التعديل الخامس: إضافة صورة بارزة كبيرة جدًا لكل صفحة

تعجبني طريقة عرض الترويسة التي تعرض فيها صورة أو مقطع فيديو في الصفحة الرئيسية لقالب Twenty Seventeen؛ لكنني لا أحب طريقة عرض الصور البارزة حيث تظهر كغيرها من الصور؛ لذا أود عرض الصورة البارزة لكل صفحة أو منشور بنفس أبعاد الصور الموجودة في الصفحة الرئيسية.
هذا أكثر التعديلات تخصيصًا للقالب، ولن أكذب عليك وأقول أنَّ الشيفرة التي ستراها بعد قليل هي شيفرةٌ بسيطةٌ وجميلة! لكنها تؤدي عملها دون مشاكل.
أوّل شيء عليك فعله هو نسخ ملف header.php من قالب Twenty Seventeen إلى القالب الابن؛ ثم عليك وضع الشيفرة الآتية بدلًا من كامل عنصر header:

<header id="masthead" class="site-header" role="banner">
  <?php if ( has_post_thumbnail() && ( is_single() || ( is_home() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) ) : ?>
    <span class="has-header-image twentyseventeen-front-page home">
      <div id="page-header" class="custom-header">
        <div id="custom-header-media" class="custom-header-media" >
          <div id="wp-custom-header" class="wp-custom-header">
            <?php if ( is_home() && ! twentyseventeen_is_frontpage() ) {
              $page_for_posts = get_option( 'page_for_posts' );
              echo get_the_post_thumbnail( $page_for_posts );
            } else {
              the_post_thumbnail( 'twentyseventeen-featured-image' );
            } ?>
          </div>
        </div>
        <div class="site-branding">
          <div class="wrap">
            <div class="site-branding-text">
              <h1 class="site-title">
                <?php if ( is_home() && ! twentyseventeen_is_frontpage() ) {
                  $page_for_posts = get_option( 'page_for_posts' );
                  echo get_the_title( $page_for_posts );
                } else {
                  the_title();;
                } ?>
              </h1>
            </div>
          </div>
        </div>
        <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
      </div>
    </span>
  <?php else : get_template_part( 'template-parts/header/header', 'image' ); endif;?>

  <?php if ( has_nav_menu( 'top' ) ) : ?>
    <div class="navigation-top">
      <div class="wrap">
        <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
      </div><!-- .wrap -->
    </div><!-- .navigation-top -->
  <?php endif; ?>

</header>

ثم علينا إضافة بعض شيفرات CSS إلى القالب الابن لكي تُنسَّق الصور البارزة مثل الصور الموجودة في الصفحة الرئيسية:

/* Force sticky navigation into position */
#page-header {
  margin-bottom: 0 !important;
}
/* Force header image to full height */
#custom-header-media {
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
  position: relative;
}

انسخ الشيفرة السابقة وألصقها في ملف الأنماط style.css في القالب الابن.
الشيفرة التي وضعناها في ملف header.php والتنسيق الذي أضفناه إلى ملف style.css سيُجبِر الصورة لأن تكون بكامل الارتفاع؛ لكن بسبب الطريقة الديناميكية التي تُضاف فيها الفئات (classes) وتُحذَف؛ فإنَّ شريط التنقل الثابت (sticky) لن يعمل مباشرةً؛ وإنما علينا إضافة شيفرة jQuery إلى قالبنا لفعل ذلك.
يمكنك إضافة الشيفرة الآتية إلى ملف JavaScript ضمن القالب الابن أو إلى إضافة، لكن احرص على أن يُحمَّل الملف بعد تحميل مكتبة jQuery.

// Sticky nav on pages and posts

var body = jQuery( 'body' );
var navigation = body.find( '.navigation-top' );
var customHeader = body.find( '.custom-header' );
var navigationOuterHeight = navigation.outerHeight();
if ( body.hasClass( 'has-header-image' ) ) {
  var headerOffset = customHeader.innerHeight() - navigationOuterHeight;
}
jQuery( window ).on( 'scroll', function() {
  if ( jQuery( window ).scrollTop() >= headerOffset ) {
    navigation.addClass( 'site-navigation-fixed' );
  } else {
    navigation.removeClass( 'site-navigation-fixed' );
  }
});

رائع! عندما تضيف الآن صورةً بارزةً إلى صفحةٍ أو منشور، فستُعرَض بكامل ارتفاع الشاشة، كما هي الترويسات الموجودة في الصفحة الرئيسية.

جميع التعديلات السابقة في قالب ابن وحيد

لقد أجرينا الكثير من التعديلات في هذا الدرس وقد يصعب على البعض تطبيقها، ولتسهيل الأمر عليك، فقد أجريتُ هذه التعديلات على قالب ابن ورفعته على GitHub؛ لذا إذا لم تجد نفسك متفرغًا للقيام بكل التعديلات السابقة ولا ترغب بإنشاء قالب ابن يدويًا لكن التعديلات أعجبتك وتريد تطبيقها على موقعك، فكل ما عليك فعله هو تنزيل الملف المضغوط ثم رفعه إلى موقعك وتفعيل القالب.
إضافةً إلى ما سبق، عليك تثبيت إضافة Custom Sidebars وإضافة jQuery Smooth Scroll لكي تتمكن من الوصول إلى جميع التخصيصات التي أجريناها في هذا الدرس.
بعد ذلك، عليك إنشاء أقسام الصفحة الرئيسية وقائمة مخصصة للتنقل فيها والمشروحة بالتفصيل في درسنا السابق «تخصيص قالب Twenty Seventeen في ووردبريس ليناسب الشركات»  ثم خصِّص قائمة روابط مواقع التواصل الاجتماعي، واكتب النص الذي تريده في التذييل، وأضف الأشرطة الجانبية لأقسام الصفحة الرئيسية، وستظهر عندك النتيجة النهائية نفسها.
ترجمة -وبتصرّف- للمقال ‎5 Excellent Ways to Hack the Twenty Seventeen WordPress Theme لصاحبه Jon Penland.