إضافة أدوات مخصصة للصفحة الرئيسية

نشرت: 2013-02-15

لقد كتبت مؤخرًا منشورًا حول نسخ عناصر واجهة مستخدم الصفحة الرئيسية وتكرارها على الصفحة الرئيسية لموضوعات Genesis الفرعية المحددة.

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

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

لقد تم طرح سؤال علي من مصمم ويب حول كيفية القيام بذلك بعد أن حاولت كسر الكود.

يستخدم هذا الرمز خطافات إطار عمل سمة Genesis والتي يمكنك تغييرها أو إزالتها اعتمادًا على السمة الرئيسية التي تستخدمها.

لنلقِ نظرة على كيفية إضافة 4 مناطق عناصر واجهة مستخدم مخصصة من سمة الأخبار إلى سمة Blissful.

سنضيف:

  • القطعة الرئيسية الرئيسية
  • ظهرت الصفحة الرئيسية على الحاجيات اليمنى واليسرى
  • القطعة المنزل السفلي

انسخ ملف Home.php

الخطوة الأولى هي نسخ ملف home.php من سمة الأخبار وتغيير جميع حالات الأخبار إلى Blissful أو القالب الفرعي الذي تضيف الأدوات إليه.

السبب في أن موضوع News child هو اختيار جيد هو أنه نفس عرض المحتوى مثل Blissful لذا لا يحتاج CSS إلى الكثير من التحرير.

هذا هو الكود بالكامل داخل ملف home.php الجديد.

 <?php add_action( 'genesis_meta', 'blissful_home_genesis_meta' ); /** * Add widget support for homepage. If no widgets active, display the default loop. * */ function blissful_home_genesis_meta() { if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) || is_active_sidebar( 'home-bottom' ) ) { remove_action( 'genesis_loop', 'genesis_do_loop' ); add_action( 'genesis_loop', 'news_home_loop_helper' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' ); add_filter( 'body_class', 'add_body_class' ); function add_body_class( $classes ) { $classes[] = 'blissful'; return $classes; } } } function news_home_loop_helper() { if ( is_active_sidebar( 'home-top' ) ) { echo '<div id="home-top"><div class="border wrap">'; dynamic_sidebar( 'home-top' ); echo '</div><!-- end .border wrap --></div><!-- end #home-top -->'; } if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) ) { echo '<div id="home-middle"><div class="border wrap">'; echo '<div class="home-middle-left">'; dynamic_sidebar( 'home-middle-left' ); echo '</div><!-- end .home-middle-left -->'; echo '<div class="home-middle-right">'; dynamic_sidebar( 'home-middle-right' ); echo '</div><!-- end .home-middle-right -->'; echo '</div><!-- end .border wrap --></div><!-- end #home-middle -->'; } if ( is_active_sidebar( 'home-bottom' ) ) { echo '<div id="home-bottom"><div class="border wrap">'; dynamic_sidebar( 'home-bottom' ); echo '</div><!-- end .border wrap --></div><!-- end #home-bottom -->'; } } genesis();

ملف Functions.php

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

 genesis_register_sidebar( array( 'id' => 'home-top', 'name' => __( 'Home Top', 'blissful' ), 'description' => __( 'This is the home top section.', 'blissful' ), ) ); genesis_register_sidebar( array( 'id' => 'home-middle-left', 'name' => __( 'Home Middle Left', 'blissful' ), 'description' => __( 'This is the home middle left section.', 'blissful' ), ) ); genesis_register_sidebar( array( 'id' => 'home-middle-right', 'name' => __( 'Home Middle Right', 'blissful' ), 'description' => __( 'This is the home middle right section.', 'blissful' ), ) ); genesis_register_sidebar( array( 'id' => 'home-bottom', 'name' => __( 'Home Bottom', 'blissful' ), 'description' => __( 'This is the home bottom section.', 'blissful' ), ) );

الخطوة التالية هي إنشاء أحجام صور جديدة للأدوات المميزة.

 /** Add new image sizes */ add_image_size( 'mini-thumbnail', 75, 75, TRUE ); add_image_size( 'small-thumbnail', 110, 110, TRUE ); add_image_size( 'home-middle-left', 280, 165, TRUE ); add_image_size( 'home-middle-right', 50, 50, TRUE ); add_image_size( 'home-tabs', 150, 220, TRUE );

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

 /** Add support for structural wraps */ add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );

ملف Style.css

وللإنهاء ، ستحتاج إلى إضافة CSS

 /* Home Top ------------------------------------------------------------ */ #home-top { border-bottom: 1px solid #d5d5d5; overflow: hidden; } #home-top .border { border-bottom: 4px solid #eee; overflow: hidden; } #home-top .wrap { overflow: hidden; padding: 20px 25px 15px; } #home-top .ui-tabs ul.ui-tabs-nav { border-bottom: 1px dotted #ddd; margin: 10px 0; padding: 0 0 13px; } #home-top .ui-tabs ul.ui-tabs-nav li a { background-color: #f5f5f5; font-weight: bold; } #home-top .ui-tabs ul.ui-tabs-nav li a:hover, #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a { background-color: #00a7ed; color: #fff; } #home-top .ui-tabs .post { background-color: #fff; margin: 0; padding: 0; } /* Home Middle ------------------------------------------------------------ */ #home-middle { border-bottom: 1px solid #d5d5d5; overflow: hidden; } #home-middle .border { border-bottom: 4px solid #eee; overflow: hidden; } #home-middle .wrap { overflow: hidden; padding: 25px 25px 15px; } .home-middle-left { float: left; width: 290px; } .home-middle-right { float: right; width: 285px; } .home-middle-left-2 { float: left; width: 290px; } .home-middle-right-2 { float: right; width: 285px; } /* Home Bottom ------------------------------------------------------------ */ #home-bottom { overflow: hidden; } #home-bottom .wrap { overflow: hidden; padding: 20px 25px 15px; }

فكيف تبحث الآن؟

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

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

لذلك هناك لديك.

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

البرامج التعليمية ذات الصلة

  • قالب الصفحة الأمامية من Genesis مع شريط جانبي مخصص