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

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

تغيير جانب الشريط الجانبي في  ووردبريس

لماذا تغيير جانب الشريط الجانبي في ووردبريس

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

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

موقع  ووردبريس به شريط جانبي على الجانب الأيسر

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

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

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

تغيير جانب الشريط الجانبي في  ووردبريس باستخدام CSS

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

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

ستحتاج إلى عميل FTP لتحرير ملفات السمات الخاصة بك. راجع دليل المبتدئين الخاص بنا حول كيفية استخدام FTP لتحميل الملفات إلى  ووردبريس .

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

/yourwebsite/wp-content/themes/your-theme-folder/

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

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

.sidebar {
        float: left;
        margin-right: -100%;
        max-width: 413px;
        position: relative;
        width: 29.4118%;
    }

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

.sidebar {
        float: right;
        margin-left: -100%;
        max-width: 413px;
        position: relative;
        width: 29.4118%;
    }

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

تم نقل الشريط الجانبي لكن جانب المحتوى لا يزال كما هو

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

.site-content {
        display: block;
        float: left;
        margin-left: 29.4118%;
        width: 70.5882%;
    }

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

.site-content {
        display: block;
        float: left;
        margin-right: 29.4118%;
        width: 70.5882%;
    }

هذه هي الطريقة التي نظر بها موقعنا الإلكتروني بعد تطبيق CSS.

يظهر تعارض CSS منطقة بيضاء فارغة

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

سوف تصادف مثل هذه الأشياء عندما تعمل مع CSS. سوف يستغرق الأمر بعض العمل البوليسي لمعرفة سبب ذلك وكيفية تعديله.

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

أداة الفحص

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

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

@media screen and (min-width: 59.6875em) {
    body:before {
        background-color: #fff;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
        content: "";
        display: block;
        height: 100%;
        min-height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 29.4118%;
        z-index: 0; /* Fixes flashing bug with scrolling on Safari */
    }

يضيف كود CSS هذا كتلة محتوى فارغة بعرض 29.4118٪ وعرض 100٪ إلى أعلى اليسار. هنا كيف سننقله إلى اليمين.

@media screen and (min-width: 59.6875em) {
    body:before {
        background-color: #fff;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
        content: "";
        display: block;
        height: 100%;
        min-height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        width: 29.4118%;
        z-index: 0; /* Fixes flashing bug with scrolling on Safari */
    }

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

انتقل الشريط الجانبي إلى الجانب الآخر

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

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

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

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