كيفية تغيير الجانب من الشريط الجانبي على وورد

سألنا أحد قرائنا مؤخرًا عن كيفية تغيير جانب الشريط الجانبي لموضوع WordPress؟

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

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

ولكن من قبل ، إذا لم تقم بتثبيت WordPress ، فاكتشف كيفية تثبيت وورد بلوق الخطوات 7 et كيفية العثور عليها، وتثبيت وتفعيل موضوع ورد على بلوق 

ثم عد إلى سبب وجودنا هنا.

لماذا تغير موقع الشريط الجانبي في WordPress؟

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

معرفة ما إذا كان يجب أن تحتوي مدونة WordPress على أشرطة جانبية

تستخدم العديد من مواقع WordPress تخطيط المدونة النموذجي مع عمودين. أحدهما للمحتوى والآخر للشريط الجانبي.

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

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

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

تغيير الشريط الجانبي مع CSS

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

اكتشف كيفية عرض الشريط الجانبي مختلفة لكل عنصر على وورد

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

ستحتاج إلى عميل FTP لتحرير ملفات سمة WordPress. استشر دليل على كيفية استخدام FTP.

قم بتسجيل الدخول إلى موقع WordPress الخاص بك باستخدام عميل FTP وانتقل إلى مجلد السمات. يوجد عادة في:

 / Yoursite / الفسفور الابيض بين المحتوى / المواضيع / ك-موضوع-مجلد / 

أنت الآن بحاجة إلى تنزيل وفتح ملف ورقة الأنماط الرئيسية لموضوع WordPress الخاص بك في محرر نصي مثل Notepad. هذا الملف يسمى style.css، وهو في الدليل الجذر لموضوع WordPress الخاص بك.

اكتشف كيفية إدارة الملفات والمجلدات وورد

في هذا الملف ، ابحث عن فئة CSS للشريط الجانبي. عموما هذه الفئة هي " الشريط الجانبي ". في هذا المثال ، نستخدم سمة WordPress الافتراضية " عشرين خمسة عشر من لديه هذه الفئة للشريط الجانبي:

.sidebar {float: left؛ الهامش الأيمن: -100٪ ؛ أقصى عرض: 413px ؛ الموقف: نسبي العرض: 29.4118٪ ؛ }

كما ترى الشريط الجانبي يتحرك إلى اليسار بهامش -100٪. سوف نغير الطفو إلى اليمين:

.sidebar {float: right؛ الهامش الأيسر: -100٪ ؛ أقصى عرض: 413px ؛ الموقف: نسبي العرض: 29.4118٪ ؛ }

احفظ التغييرات وقم بتحميل ملف style.css على موقع الويب الخاص بك باستخدام عميل FTP. الآن ، إذا قمت بزيارة موقع الويب الخاص بك ، سيبدو كما يلي:

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

. site-content {display: block؛ تعويم: اليسار. الهامش الأيسر: 29.4118٪؛ العرض: 70.5882٪ ؛ }

سوف نقوم بتغييره لنقل المحتوى إلى اليمين. على النحو التالي:

. site-content {display: block؛ تعويم: اليسار. الهامش الأيمن: 29.4118٪ ؛ العرض: 70.5882٪ ؛ }

إليك ما سيبدو عليه موقع الويب الخاص بك بعد تطبيق كود CSS هذا.

كما ترون ، قمنا بتغيير موقع منطقة المحتوى والشريط الجانبي. ومع ذلك ، لا يزال هناك كتلة بيضاء على اليسار.

الذهاب أبعد من ذلك من خلال اكتشاف كيفية إدارة الملفات والمجلدات وورد

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

استخدم أداة "المفتش" في متصفحك للنظر في شفرة المصدر. ضع مؤشر الماوس على المنطقة المتأثرة في المتصفح ، وانقر بزر الماوس الأيمن وحدد "المفتش" من قائمة المتصفح.

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

اكتشاف لدينا ملحقات 5 WordPress لتحرير CSS بصريًا على مدونتك

لذلك يجب إعادة ضبط CSS المطابق للعنصر المميز.

media screen و (min-width: 59.6875em) {body: before {background-color: #fff؛ صندوق الظل: 0 0 1px rgba (0 ، 0 ، 0 ، 0.15) ؛ المحتوى: "" ؛ عرض: كتلة. الارتفاع: 100٪ ؛ دقيقة الطول: 100 ٪ ؛ الموقف: ثابت. أعلى: 0 ؛ اليسار: 0 ؛ العرض: 29.4118٪ ؛ مؤشر z: 0 ؛ / * إصلاح الأخطاء وامض مع التمرير على Safari * /}

يضيف رمز CSS هذا كتلة فارغة من عرض 29,4118٪ وعرض 100٪ إلى أعلى اليسار. إليك كيفية نقلها إلى اليمين.

media screen و (min-width: 59.6875em) {body: before {background-color: #fff؛ صندوق الظل: 0 0 1px rgba (0 ، 0 ، 0 ، 0.15) ؛ المحتوى: "" ؛ عرض: كتلة. الارتفاع: 100٪ ؛ دقيقة الطول: 100 ٪ ؛ الموقف: ثابت. أعلى: 0 ؛ اليمين: 0 ؛ العرض: 29.4118٪ ؛ مؤشر z: 0 ؛ / * إصلاح الأخطاء وامض مع التمرير على Safari * /}

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

يمكن أن يكون العمل مع CSS مربكًا للمبتدئين. إذا كنت لا ترغب في القيام بكل العمل اليدوي ، فيمكنك تجربة وورد المغلق البطل المساعد. يسمح لك بتحرير CSS دون كتابة كود ، ويعمل مع كل سمة WordPress.

اكتشف أيضًا بعض الإضافات المتميزة لبرنامج WordPress  

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

نحن نقدم لك هنا بعض الإضافات WordPress المتميزة التي سوف تساعدك على القيام بذلك.

1. Zxeion

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

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

اكتشف أيضا لدينا 7 الإضافات لتعزيز الشريط الجانبي الخاص بك على وورد

ميزاته هي: الحماية في الوقت الحقيقي ، ودعم العملاء الممتاز ، والتحديثات المنتظمة ، وحظر عناوين IP ، والتوثيق الممتاز ، والواجهة الحديثة والمهنية ، ودعم العملاء المخصص وغيرها

تحميل | عرض | استضافة المواقع

2. Slaido 

Slaido هو أ وورد البرنامج المساعد Premium الذي يسمح لك بالاختيار من بين ما يقرب من 320 قالب تمرير سريع الاستجابة واستيراد واحد منهم إلى موقع الويب الخاص بك ببضع نقرات. إنها حزمة كاملة من القوالب ، مثالية لـ تعديل سلايدر. لذلك سيتعين عليك تثبيته أولاً لاستخدامه بالكامل وورد البرنامج المساعد

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

تحميل | عرض | استضافة المواقع

3. اتصل بنا

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

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

ندعوك أيضًا إلى قراءة: 10 WordPress الإضافات لإنشاء وإدارة موقع مطعم

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

تحميل | عرض | استضافة المواقع

الموارد الموصى بها

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

• كيفية العثور على عنوان URL لتسجيل الدخول الخاص بمدونة WordPress الخاصة بك
• كيفية إنشاء منطقة بطل السوبر مع النص المتحركة
• كيفية تخصيص CSS لموقع الويب الخاص بك WordPress
• كيفية إضافة فئات إلى القائمة الخاصة بك وورد بلوق

وفي الختام

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

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

إذا كانت لديك اقتراحات أو ملاحظات ، فاتركها في قسمنا تعليقات.

...