كيفية إضافة الشريط الجانبي الأيسر في WordPress - دليل خطوة بخطوة

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

يتم ترميز الأشرطة الجانبية في ملفات قالب النسق.

داخل كل ملف قالب يوجد العديد من روابط WordPress.

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

كود تحميل الشريط الجانبي الأيسر هو

<؟ php get_sidebar ('left') ؛ ؟>

تُستخدم وظيفة 'get_sidebar' في قوالب متعددة. البعض لإظهار الشريط الجانبي الأيمن ، والبعض الآخر لا يظهر أي شيء.

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

تحتاج إلى تحرير الأشرطة الجانبية الموجودة ، أو تحميل الأشرطة الجانبية 'الديناميكية'.

لإجراء تغيير على مستوى الموقع ، يجب استبدال كل مثيل لوظيفة get_sidebar بكود لتحميل الشريط الجانبي الأيسر.

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

تحتاج إلى إضافته يدويًا.

هذا البحث عن الإصلاح ينتهي هنا.

تمت تجربة واختبار الرموز المتعددة وإضافة المكونات الإضافية وحذفها (لأنها لم تعمل) ، وأخيرًا ...

التعليمات البرمجية الوظيفية المبرمجة (التي يمكنك نسخها ولصقها) والتي ستضيف شريطًا جانبيًا مخصصًا إلى يسار منطقة المحتوى الخاصة بك.

كيفية إضافة الشريط الجانبي الأيسر في WordPress

1) قم بتسجيل شريط جانبي جديد في ملف jobs.php الخاص بك.

2) قم بإنشاء ملف sidebar-left.php.

3) قم بتحميله إلى مجلد السمة الخاص بك.

4) قم بتعديل قالب page.php الخاص بك لتحميل الشريط الجانبي الأيسر.

otwol بكرة إلى مقابلة حقيقية

5) قم بتحرير ورقة الأنماط الخاصة بك لتعويم الشريط الجانبي على يسار المحتوى الخاص بك.

لا تضيع وقتك مع المكونات الإضافية لإضافة شريط جانبي أيسر في WordPress

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

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

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

هذا يعني العمل مع PHP. شيء يمكن أن يكسر موقعك إذا أخطأت في الكود ، أو لصقه في المنطقة الخاطئة ، أو نسيت إغلاق علامة div.

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

هذه طريقة واحدة للذهاب. طريق طويل.

جيلي وأرييل ريفيرا - قصة حب

الطريق الأسرع هو تنزيل قالب السمة الخاص بك على سطح المكتب.

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

عندما لا تعرف ما الذي يذهب إلى أين - توقع أن تنكسر الأشياء

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

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

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

أولاً: تسجيل شريط جانبي جديد

يتم ذلك في ملف jobs.php الخاص بك

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

سيكون هناك ملف jobs.php.

أضف هذا الرمز

function my_custom_sidebar() {
register_sidebar(
array (
'name' => __( 'Left', 'twentytwentyone' ),
'id' => 'left-sidebar',
'description' => __( 'Left Sidebar', 'twentytwentyone' ),
'before_widget' => '<div class="widget-content">',
'after_widget' => "</div>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
)
);
}
add_action( 'widgets_init', 'my_custom_sidebar' );

لا تفريغ الكود في أي مكان. قم بالتمرير لأسفل حتى تصل إلى قسم التعليقات الذي يحتوي على

/ **
* تسجيل منطقة القطعة.

هذا هو مكان تسجيل الشريط الجانبي الأيسر بالرمز أعلاه.

اضغط حفظ والخروج. هذا كل ما تحتاج لإضافته إلى هذا الملف.

الجزء الوحيد من الكود أعلاه الذي يجب تغييره هو اسم النسق. استبدل 'twentytwentyone' باسم الموضوع الخاص بك.

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

انها لن تعمل ، بعد.

التالي هو إنشاء ملف sidebar.php

هذا الجزء أسهل مما يبدو.

كل ما تحتاجه هو محرر نص عادي.

لا تستخدم برنامج MS word أو أي معالج نصوص آخر. يضيف هؤلاء الترميز الذي يعبث مع WordPress.

انسخ والصق الكود أدناه في محرر نص عادي

جودي آن سانتوس agoncillo Instagram

<div id="sidebar-left">
<?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar('sidebar-left');?>
</div>

ثم احفظه باسم 'sidebar-left.php'. تأكد من أنه ملف PHP وليس TXT.

أيضًا ، يجب أن تكون كلمة 'الشريط الجانبي' هي الكلمة الأولى في اسم الملف لكي يتعرف WordPress عليها.

لن يعمل Left-Sidebar.php. (سيتضح لماذا بعد قليل).

قم بتحميل ملف sidebar-left.php الخاص بك إلى cPanel

ارجع إلى مجلد سمة WP في cPanel وقم بتحميل ملفك الجديد.

في هذه المرحلة ، سيتم تسجيل الشريط الجانبي الخاص بك ، وسيكون الملف نشطًا في قالبك.

للتأكيد ، سترى الملف في مجلد القالب الخاص بك

الآن ، تحتاج إلى ترميزها في قالب صفحة

تحتوي جميع سمات WordPress على قوالب صفحات. البعض أكثر من البعض الآخر.

إذا كان لديك قالب واحد فقط ، فإن الملف المراد تحريره هو page.php لصفحاتك و post.php لمنشورات المدونة.

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

انسخ محتويات الصفحة بشريط جانبي أيمن ، ثم بدل كل مثيل من الشريط الجانبي الأيمن مع الشريط الجانبي الأيسر ، ثم احفظ الملف الجديد.

سيوفر ذلك الوقت في المرحلة التالية لتصميم الشريط الجانبي الخاص بك.

الكود الخاص بتحميل الشريط الجانبي الأيسر هو

<?php get_sidebar('left'); ?>

جميع السمات مع أي شريط جانبي أو منطقة عناصر واجهة المستخدم تستخدم خطاف 'get_sidebar'.

يشير ('اليسار') الموجود بين قوسين إلى إخبار WordPress بالملف المراد تحميله. كما ترى

<?php get_sidebar(); ?>

… سيقوم WP بتحميل ملف sidebar.php. ضع 'يمين' داخل الأقواس المتعرجة ويقوم بتحميل ملف sidebar-right.php.

لهذا السبب يجب أن يكون لديك كلمة 'sidebar' أولاً في اسم الملف عند حفظ ملف sidebar-left.php.

بعض السمات ، مثل نسق Twenty One ، لها تذييل فقط.

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

في محاولاتنا ، تمكنا من ذلك. مرحلة شد الشعر هي جعل الشريط الجانبي يطفو على يمين المحتوى.

اغتصاب سائحة يابانية في الهند

إذا كنت تستخدم قالب Twenty Twenty One ، فافعل ذلك بنفسك وتحقق من خيارات المكون الإضافي Twenty-One theme من WebD LTD.

الإصدار المجاني لا يضيف وظائف الشريط الجانبي الأيسر. الإصدار المتميز يفعل.

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

مع العلم أنها كانت مهمة قابلة للتنفيذ ، كان السعي لاكتشاف كيفية القيام بذلك.

كيف يتم ذلك:

الحيلة هي الكتابة فوق الأجزاء الرئيسية من ملف style.css.

هذا أبسط بكثير باستخدام قسم CSS الإضافي في منطقة إدارة WordPress الخاصة بك.

لأن ملف style.css يتكون من آلاف الأسطر.

استخدام مُخصص WordPress> CSS الإضافي يجعل هذا الأمر سهلاً.

الجانب السلبي هو أنه يتطلب! التعليمات البرمجية المهمة لاستخدامها بشكل نهائي فوق الكود الحالي.

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

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

جي إم دي جوزمان وباربي إمبريال

نظرًا للظروف المتعلقة ببعض الموضوعات التي تحتوي على الكثير من التعليمات البرمجية ، فإن ذلك له ما يبرره.

ملحوظة: هذا لموضوع واحد وعشرين. سيكون عنصر 'محتوى عنصر واجهة المستخدم' مختلفًا في الموضوعات الأخرى.

استخدم فاحص المتصفح (انقر بزر الماوس الأيمن على الأداة ، وحدد فحص ، وستكون فئة div [name] هي ما تقوم بإدراجه هنا.

أولاً ، أضف CSS هذا

.widget-content {
width:350px;
float:left;
padding-left: 150px;
}

سيؤدي ذلك إلى إصلاح المحتوى داخل عنصر واجهة المستخدم الخاص بك إلى 350 بكسل عائمًا على يسار المحتوى الخاص بك. يمكنك تغيير العرض ليناسب تفضيلاتك.

الجزء التالي هو المكان الذي يتم فيه وضع العلامة المهمة! وهو لتوسيع عرض منطقة المحتوى الخاصة بك. بخلاف ذلك ، يتم عرض المحتوى في وسط الصفحة مع وجود الكثير من المساحات البيضاء على كلا الجانبين.

إذا كنت سعيدًا بالحصول على ذلك ، فاتركه كذلك.

بخلاف ذلك ، أضف هذا الرمز إلى أداة تخصيص CSS الخاصة بك.

.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {
max-width: var(--responsive--alignwide-width) !important;
}

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

لكل موضوع آخر ، أضف الكود التالي

<?php get_sidebar('left'); ?>

... إلى كل صفحة من صفحاتك ونشر القوالب لتحميل الشريط الجانبي الأيسر.

تصميم الأشرطة الجانبية اليسرى في أي سمة من سمات WordPress

بدون تصميم منطقة عنصر واجهة الشريط الجانبي الأيسر ، فإن شريط get_side ('يسار') سيضخ الشريط الجانبي إلى اليسار دون تحديد مكان عرض المحتوى.

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

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

بالنسبة لجميع السمات الأخرى ، باستثناء نسق Twenty-One ، (ربما الآخرين الذين ليس لديهم أشرطة جانبية مسجلة) ، يكون كود CSS لمحاذاة الشريط الجانبي إلى يسار المحتوى

.content {
width: 75%;
float: right;
}
.sidebar {
width: 25%;
float: left;
}

تختلف الأجزاء التي تلي الفترة (.) حسب الموضوع.

قد يكون البعض بعنوان 'مقالة' ، والبعض الآخر ، 'محتوى الجسم' أو ما شابه.

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

يمكنك تغيير الأحجام (75٪ و 25٪) حسب المقاس الذي تريده.