هل تساءلت يومًا كيف يمكنك تصميم عناصر مختلفة لموضوع ووردبريس؟ حسنًا ، يختلف من موضوع إلى موضوع ، ولكن هناك فئات ومعرفات CSS معينة يتم إنشاؤها بواسطة ووردبريس. إذا كنت شخصًا يحاول تصميم سمة ، أو تتطلع إلى إنشاء سمة للإصدار العام ، فهذه بعض عناصر النمط التي قد ترغب في إضافتها في المظهر الخاص بك.
الهدف من ورقة الغش هذه هو مساعدة المبتدئين الذين يتطلعون للوصول إلى تصميم قالب ووردبريس. إذا كنت مبتدئًا لا ترغب في التعامل مع الأكواد ، فإننا نوصيك بالحصول على إطار عمل للموضوع مثل Headway الذي يقوم بكل شيء من أجلك بالسحب والإفلات. بالنسبة لبقيةكم ، سنستعرض بعضًا من أهم أنماط ووردبريس الافتراضية واحدًا تلو الآخر.
فيديو تعليمي
اشترك في WPBeginner
إذا لم يعجبك الفيديو أو كنت بحاجة إلى مزيد من الإرشادات ، فاستمر في القراءة.
أحد الأشياء الرائعة في ووردبريس هو قابليته للتخصيص. يسمح لك باستهداف جوانب محددة جدًا من موقعك باستخدام CSS. تتمثل إحدى الطرق للقيام بذلك عن طريق إضافة فئات مخصصة إلى عناصر مختلفة من مدونتك. أهمها هي علامة <body>. فيما يلي بعض الأمثلة للفئات الشائعة التي قد يضيفها ووردبريس إلى هذا العنصر:
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}على سبيل المثال ، إذا كنت ترغب في تصميم صفحة نتائج البحث بطريقة معينة ، يمكنك استخدام فئة “نتائج البحث” لإضافة النمط الخاص بك. يضيف ووردبريس هذه الفئة فقط إلى علامة النص الأساسي عندما تكون صفحة نتائج البحث نشطة بحيث لا تؤثر على أي صفحات أخرى.
تمامًا كما هو الحال مع عنصر الجسم ، يضيف ووردبريس فئات ديناميكية إلى عناصر المنشور أيضًا. فيما يلي قائمة ببعض أشهرها:
.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}إذا كنت قد قرأت مقالتنا What، Whys، and How to’s of Post Formats in ووردبريس 3.1 ثم أنت حول تنسيقات المنشورات وكيف يمكنك عرض مشاركاتك بشكل مختلف وفقًا للتنسيق الذي تختاره. مرة أخرى ، يضيف ووردبريس فئات ديناميكية إلى منشورك باستخدام وظيفة post_class () التي تتيح لك إنشاء أنماطك الخاصة لكل تنسيق. ستضيف الوظيفة post_class () فئة على شكل “.format-foo” حيث يكون foo هو أي تنسيق منشور اخترته مثل. معرض ، صورة ، إلخ.
.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}في مقالنا المسمى كيفية تصميم قوائم التنقل في ووردبريس ، نناقش كيف يمكنك المضي قدمًا في إضافة فصلك الخاص إلى قائمتك. سنفترض أنك قد قرأته وأنك أعطيت قائمة التنقل الخاصة بك اسم الفصل الخاص بها وهو “القائمة الرئيسية”.
#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor
.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Linkلاحظ أنه عند إنشاء قائمة في ووردبريس يتم تغليفها تلقائيًا في div. هذا div له اسم فئة فقط إذا حددته (اخترنا “القائمة الرئيسية”). من هناك تقوم فقط بتصميم عناصر القائمة المختلفة.
يعد محرر WISWYG أحد أكثر جوانب ووردبريس شيوعًا والأكثر استخدامًا. لهذا السبب ، من الجيد أن يكون لديك أنماط جاهزة لأي شيء قد يضيفه المستخدم إلى مدونته ، مثل الصور أو الاقتباسات المحظورة. يوضح لك CSS التالي الفئات التي يضيفها ووردبريس تلقائيًا إلى هذه العناصر:
.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}
.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}
.wp-smiley {}
blockquote.left {}
blockquote.right {}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}
.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}يمكنك أن ترى أن هناك عدة فئات تتعلق بالصور فقط. إذا قرر المستخدم ، على سبيل المثال ، تضمين صورة محاذاة إلى اليسار ، فسيقوم ووردبريس بإضافة فئة “alignleft”.
تعد الأدوات الذكية جانبًا شائعًا آخر في ووردبريس. بصفتك المطور ، يمكنك التحكم في الأدوات التي سيتم عرضها ، لذا ستعرف عادةً الأنماط التي يجب إضافتها بالضبط. يأتي ووردبريس مع عدد قليل من الأدوات الافتراضية ، ومع ذلك ، ما لم تقم بإزالتها ، فمن الحكمة إضافة نمط إلى فئاتهم.
.widget {}
#searchform {}
.widget_search {}
.screen-reader-text {}
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
.textwidget {}
.widget_text {}
.textwidget p {}عند تصميم أدوات التصميم ، من المحتمل أن ينتهي بك الأمر باستخدام نفس الأنماط مرارًا وتكرارًا. لهذا السبب ، من الجيد دمج الفئات في ورقة الأنماط الخاصة بك باستخدام الفواصل. على سبيل المثال ، يمكنك الجمع بين .widget_pages ul و .widget_archive ul من خلال القيام بشيء مثل هذا:
.widget_pages ul, .widget_archive ul {}بقدر ما يمكن أن تحصل تعليقات التصميم على ووردبريس مما يجعلها أسهل بكثير مع فئاتها الافتراضية. ومع ذلك ، إذا كنت لا تتعامل مع التعليقات المترابطة ، فمن الممكن تجاهل الكثير منها.
/*Comment Output*/
.commentlist .reply {}
.commentlist .reply a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
#cancel-comment-reply {}
#cancel-comment-reply a {}
/*Comment Form */
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submitنظرًا لأن هذه ليست سوى ورقة غش ، فلا يزال هناك العديد من الفئات والمعرفات الأخرى التي ربما لم نقم بتغطيتها. إذا كنت تشعر أن شيئًا آخر مهم وأنه ينتمي إلى هذه القائمة ، فلا تتردد في ترك تعليق أدناه.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
