أضف تخطيطات البناء والشبكة إلى موقع WordPress الخاص بك باستخدام Just CSS

هل أردت يومًا أن تبرز كيفية عرض مشاركاتك على صفحة WordPress الرئيسية والمحفوظات الخاصة بك؟

ماذا لو كان بإمكانك عرض مشاركاتك باستخدام أسلوب البناء (Pinterest) أو ربما تخطيط الشبكة ، كل ذلك فقط عن طريق إضافة مقتطف من CSS؟

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

استمر في القراءة ، أو انتقل إلى الأمام باستخدام هذه الروابط:

• الاستعدادات لإضافة تخطيطات البناء والشبكة إلى موقعك
• إعطاء مشاركاتك نظرة Pinterest الماسونية
• وضع المشاركات في شبكة
• إضافة CSS مخصص إلى موقعك

الاستعدادات لإضافة تخطيطات البناء والشبكة إلى موقع WordPress الخاص بك

تعتمد هذه الحلول بشكل كامل على CSS ، وبالتالي ، ليس من المستغرب أنها تعتمد بشكل كبير على ترميز HTML على موقعك للعمل دون تعديل.

تم تصميم CSS المستخدم (واختباره) بالسمات الافتراضية. هذا يعني أن CSS لديها بعض التوقعات:

1. توجد الفئات في عنصر النص الذي يصف نوع الصفحة (على سبيل المثال ، الصفحة الرئيسية ، والمدونة ، والأرشيف ، والبحث)
2. قوائم المشاركات عبارة عن مجموعات من عناصر المقالة ، كاملة برأس ملفوف في div بمعرف المحتوى

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

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

اختيار مكان تطبيق التصميم

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

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

على سبيل المثال ، إذا كنت تريد تطبيق النمط على الصفحة الرئيسية فقط ، فإن CSS الخاص بك سيبدو كما يلي:

body.blog article { styles go here... }

لتطبيق النمط على الصفحة الرئيسية وصفحات الأرشيف (الفئة):

body.blog article, body.archive article { styles go here... }

لتطبيق النمط على نتائج البحث فقط:

body.blog search { styles go here... }

مرة أخرى ، هذا يعتمد على الموضوع الخاص بك بعد توصيات WordPress المواضيعية.

التوافق المتصفح

كونها CSS3 ، لن تعمل هذه التقنيات عبر جميع الأنظمة الأساسية والمتصفحات.

لقد اختبرت وأؤكد أنها تعمل على أحدث إصدارات Chrome و Safari (كلاهما على OS X) و iOS (5+). تشير مواقع CSS المختلفة أيضًا إلى أن IE10 لن يواجه أي مشاكل.

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

إذا وجدت أن الأنماط تعمل بنجاح على نظام أساسي غير مذكور (خاصة Windows) ، فأخبرنا بذلك في التعليقات.

ما يكفي من إخلاء المسؤولية ، إذن ، دعونا نلقي نظرة على كيفية تجميل قوائم منشوراتك.

إعطاء مشاركاتك نظرة Pinterest الماسونية

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

هذا الحل ، المستوحى من منشور Rahul Arora على W3Bits ، يعتمد على دعم CSS3 لخاصية العمود . ستقسم هذه الخاصية المحتوى عبر عدد محدد من الأعمدة ، وبينما من المحتمل أن يكون إنشائها مستوحى أكثر من فكرة تدفق النص عبر الأعمدة على غرار الصحف ، إلا أنها مفيدة تمامًا لتخطيط البناء.

/* Masonry Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

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

CSS:

1. يعيّن عدد الأعمدة في غلاف #content باستخدام خاصية عدد الأعمدة - في هذه الحالة 4. يقوم أيضًا بتعيين فجوة العمود . ستلاحظ استخدام -moz- و -webkit- لمتصفح Firefox و Safari.

2. يحول عناصر المقالة إلى قوالب ، باستخدام كتلة مضمنة وضبط العرض على 100٪.

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

فقط لإبقاء الأمور مرتبة ، قد تفكر أيضًا في إضافة ما يلي:

/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}

h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

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

جعلها مستجيبة

أحد عيوب نهج العمود هو أنه يتدهور بسرعة عندما يصبح حجم الشاشة أصغر.

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

@media only screen and (max-width : 1024px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 768px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 480px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

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

نقاط التوقف الأربعة هذه ، ستعمل 3 منها عبر جميع الأنظمة الأساسية (ما عليك سوى تغيير حجم نافذة المستعرض الخاص بك لرؤيتها سارية المفعول) وواحدة مخصصة للكمبيوتر اللوحي في الوضع الرأسي.

إليك تصميم البناء على iPad و iPhone:

يمكنك (ويجب) ، بالطبع ، المضي قدمًا وإضافة المزيد من الأناقة إلى الطوب لتحسين المظهر المرئي ، لكن 3 عبارات CSS فقط لتحويل قوائم منشوراتك إلى جدار حجري أمر مثير للإعجاب!

وضع المشاركات في شبكة

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

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

هذه المرة CSS أقصر ، حيث تعتمد ببساطة على تصميم عناصر المقالة :

/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

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

الخاصية المهمة هي العرض لأن هذا يحدد عدد "الأعمدة". لقد استخدمت 32.5٪ كقيمة أولية (استخدام 33٪ يمكن أن يؤدي إلى التفاف سابق لأوانه) والذي سيوفر 3 أعمدة. من الواضح ، إذا كنت تريد 4 أعمدة ، فستستخدم 24.5٪ ، 5 أعمدة 19.5٪ ، إلخ.

مضيفا الاستجابة

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

نظرًا لأن خاصية العرض هي التي تحدد عدد الأعمدة ، فهذه هي الخاصية التي سيتم تغييرها في استعلامات الوسائط المختلفة.

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 768px) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 480px) {

body.blog article, body.archive article {
width: 100%;
}
}

3 استعلامات فقط هذه المرة حيث بدأت بثلاثة أعمدة فقط. إذا قررت البدء بمزيد من الأعمدة ، فقد ترغب في إضافة نقطة توقف بحد أقصى للعرض: 1024 بكسل لتعيين العرض على 32.5٪ (3 أعمدة).

سينتج عن ذلك:

1. عمودان على جهاز لوحي في الوضع الرأسي
2. عمودين عندما يكون حجم الشاشة أقصى عرض 768 بكسل
3. عمود واحد عندما يكون حجم الشاشة بحد أقصى للعرض 480 بكسل

ستغطي نقاط التوقف هذه كلاً من الأجهزة اللوحية والهواتف الذكية وتغيير حجم نافذة المتصفح.

إليك تخطيط الشبكة على iPad و iPhone:

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

إضافة CSS مخصص إلى موقعك

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

• سمة الطفل - أنشئ سمة فرعية وأضف CSS إلى ورقة الأنماط
• البرنامج المساعد - أضف التصميم الذي اخترته إلى ملف CSS جديد وأنشئ مكونًا إضافيًا يستخدم وظيفة wp-enqueue-style ، ربما استنادًا إلى الصفحة التي يتم إنشاؤها ، لإدراج الملف الجديد في قائمة
• قم بتحرير ورقة أنماط النسق الحالي - لا تفعل ذلك فعلاً
• استخدم مكون CSS مخصصًا - هناك عدد من المكونات الإضافية التي ستسمح لك بإضافة CSS مخصصة إلى موقعك عبر واجهة مسؤول WordPress (المكوّن الإضافي Simple Custom CSS المسمى بشكل مناسب هو أحد هذه المكونات الإضافية)

أحب استخدام المكون الإضافي Custom CSS. إنه سريع وسهل الإعداد ، ويجعل الاختبار أمرًا سهلاً ، كما أنه سريع وسهل إزالة CSS من موقع WordPress الخاص بك (امسح المحرر أو قم بإلغاء تثبيت المكون الإضافي).

CSS ، الطريق إلى WordPress Zen

لقد أثبت CSS Zen Garden الرائع لسنوات عديدة أنه يمكن تغيير شكل وأسلوب الموقع بشكل كبير دون تغيير واحد في الترميز ولكن عن طريق تغيير CSS.

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

فقط القليل من CSS.

ملاحظة المحرر: تم تحديث هذا المنشور من أجل الدقة والملاءمة. [نُشرت في الأصل: تموز / يوليو 2014 / تمت المراجعة: شباط / فبراير 2022]

• CSS
• شبكات