برگه تقلب class و id های پیش فرض وردپرس برای استایل دهی به قالب

class و id های پیش فرض وردپرس برای استایل دهی به قالب

آیا تا کنون فکر کرده اید که چگونه می توانید به عناصر مختلف قالب های وردپرس استایل دهید. خوب موضوع استایل دهی برای هر قالبی با قالب دیگر متفاوت می باشد, اما تعدادی از کلاس های CSS و ID ها وجود دارند که وردپرس به صروت خودکار آن ها را ایجاد می کند. اگر شما می خواهید به یک قالب استایل دهید یا به دنبال ساخت یک قالب برای انتشار عمومی آن هستید, در این مطلب از روکش با ما همراه شوید تا با برخی از class , id های پیشفرض استایل دهی قالب وردپرس آشنا شوید.

شیوه نامه پیش فرض بدنه (body class) پوسته های وردپرس

یکی از ویژگی های منحصر بفرد وردپرس قابلیت شخصی سازی بسیار بالای آن می باشد. وردپرس به شما اجازه می دهد تا بخش های مختلف سایت خود را با استفاده از css مدیریت کنید. یکی از راه های انجام اینکار افزودن کلاس های سفارشی به المنت های مختلف قالب وردپرس می باشد. از بین همه آنها تگ body از همه مهمتر می باشد. در اینجا چند نمونه از کلاس هایی که ممکن است وردپرس به تگ 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) {}

این کلاس ها همگی با توجه به نوع صفحه ای که باز می شود به تگ body افزوده می شوند. البته تگ body باید به شکل زیر کد نویسی شده باشد تا وردپرس بتواند این کلاس ها را به ان اضافه کند.

<body <?php body_class($class); ?>>

حال مثلا اگر بخواهید به یک المان در صفحه نتایج جستجو وردپرس استایل مشخصی را بدهید کافی است تا از کلاس search استفاده کنید و مطمئن باشید که این استایل فقط روی المان های صفحه نتایج جستجو اثر می گذارد زیرا این کلاس تنها به تگ body برگه نتایج جستجو اضافه می شود.

شیوه نامه پیش فرض مطالب (Post Styles) وردپرس

درست مانند تگ body وردپرس کلاس های پویای را به المان های مطالب نیز اضافه می کند. کلاس های زیر مهمترین آنها می باشند.

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

همچنین اگر در قالب خود می خواهید از ساختار نوشته های وردپرس استفاده کنید کلاس های زیر برای انواع مختلف ساختار مطالب وردپرس ایجاد می شوند که توانید از آنها برای تغییر استایل انواع نوشته ها استفاده کنید.

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

البته شما باید در المانی که مطالب قرار می گیرند از تابع زیر استفاده کرده باشید.

<?php post_class(); ?>

شیوه نامه پیش فرض ادیتور WISIWYG وردپرس

ادیتور WISIWYG یکی از محبوبترین و پر مصرف ترین ادیتورهای وردپرس می باشد. به همین خاطر بسیار خوب است تا برای هر المانی (مانند تصاویر, نقل قول ها و ..) که کاربر از طریق این ادیتور در سایت خود قرار می دهد استایل مشخصی را در نظر بگیرید.
این کلاس های 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

از آنجایی که این مطلب فقط یک برگه تقلب (Cheat Sheet) می باشد ممکن است تعداد زیادی کلاس و id از قلم افتاده باشند. اگر فکر می کنید که مورد مهم دیگری نیز باید در این لیست گنجانده شود لطفا در دیدگاه ها مطرح کنید تا آن را نیز به موارد گفته شده اضافه کنیم.

دیدگاه کاربران

  1. محمد

    آقا دمت گرم خیلی وقت بود دنبال چنین چیزی بودم

  2. خوب بود ولی از طریق Inspect Elementor هم میشد بهشون دسترسی پیدا کرد

  3. سلام خدمت شما … ببخشید من وقتی این کد php رو در بخش هدر قالب قرار میدم یک استایل با تایپ media میاد و توش چند خط کد css درج شده که باعث بهم ریختگی قالب میشه .. میخواستم بدونم چجوری میشه حذفش کرد …

    باتشکر

    • سعید شعبانی

      آرش جان اگر منظورتون این کد هست

      <body <?php body_class($class); ?>>
      

      باید بگم که این کد اصلا کاری به جاهای دیگه قالب نداره و فقط با توجه به صفحه ای که باز میشه یک سری کلاس های css را به تگ body اضافه می کنه و شما می تونید از این کلاس ها برای طراحی قالب سایتتون استفاده کنید.

  4. Mohammad

    سلام.
    برای اینکه دیدگاه رنگ دیدگاه مدیر رو از سایر دیدگاه ها متمایز کنیم مثل سایت خودتون باید چیکار کرد؟
    مرسی

  5. سلام اقا سعید خسته نباشید

    اقا سعید کاش تگ های پیشفرض ابزارک هایه وردپرس رو به طور کامل در یک پس میزاشتین !!

    • سعید شعبانی

      منظورتون از تگ های پیشفرض ابزارک هایه وردپرس را متوجه نمی شم. اگر منظروتون کلاس ها و id های پیشفرض ابزارک های وردپرس هست, داخل همین مطلب اکثر اون ها را قرار دادم.

      • ببخشید منظورم همون (id , class) ها بود بهتر میشد اگه به صورت جامع توی یک فایل .css برای دانلود میزاشتینش چون تویه هر سایتی میرم فقط و فقط (calss , id) پیشفرض search و comments.php و … رو گراشتن و هیچکدوم کامل و جامع نیستن تا به نحوه شایسته ای بتونن به ما تازه کارا کمک کنند

        • سعید شعبانی

          خوب ایمان جان داخل همین مطلب تمام id و class های مربوط به ابرارک های پیشفرض وردپرس را قرار دادم [بخش شیوه نامه پیش فرض ابزارک های وردپرس]. شما می تونید تمام این ایدی و کلاس ها را داخل یک فایل css قرار بدید و ازشون استفاده کنید.

  6. محسن

    خسته نباشید.میشه طریقه اضافه کردن افکت های hover , respanciv کردن عکس ها و منوها و متن ها رو هم توضیح بدین.یه چندتایی افکت هاور با کتابخانه های جی کوئریشون دانلود کردم ولی نمی دونم باید کجا قرارشون بدم تا توی سایت اعمال بشن.در ضمن راجع به کلاس های زیبا سازی منو ها هم یه توضیحی بدین.مثلا چطور میشه یه مطلب رو با عکس توی منوی اصلی سایت نشون بدیم.مثل منوی Cat. Mega این سایت http://themes.tielabs.com/?theme=sahifa
    ممنون

    • سعید شعبانی

      دوست عزیز هر کدام یک از این مواردی که گفتید خودش نیاز به آموزش های مفصلی داره و نمیشه داخل یک دیدگاه اون ها را گفت. ولی درکل وقتی شما می خواهید از یک کد جی کوئری در قالب سایتتون استفاده کنید باید اولا کتابخانه جی کوئری را در سربرگ قالب فراخوانی کنید بعد هم کدهای مربوط به پلاگین جی کوئری را قرار بدید و در آخر هم با استفاده از آموزشی که اغلب پلاگین های جی کوئری همراه خودشون دارند از اون ها در جاهایی که نیاز دارید استفاده کنید. برای ساخت مگا منو هم سعی می کنم یک آموزش داخل روکش قرار بدم.

  7. معصومه هاشمی طاهری

    سلام
    خیلی خیلی خیلی خیلی ممنونم.

  8. باسلام اگردسته های ایجادشده مطالب مربوطبه هردسته رانمایش نده وتمامی مطالب رانمایش بده بایدچکارکنم که مطالب هردسته مربوط به خودش رانمایش دهد باتشکر

    • سعید شعبانی

      شما باید چندتا دسته ایجاد کنید و بعد هر مطلب را در دسته مورد نظرش ارسال کنید تا درون اون دسته قرار بگیره. اگر پس از انجام این کار مطالب در دسته های خودشون قرار نگرفتند باید بررسی کنید ببیند مشکل از کجا هست.

  9. سلام علیکم
    برادر عزیزم قالب من یه مشکل داره که داخل پست ها عکس ها رو به صورت تکی نشون میده و هرچه قدر سعی میکنم که کنار هم نمایش داده بشن فایده نداره.
    ممنون میشم که بتونید راهنماییم کنید.
    ۳۱۳apps.ir
    یا علی

    • سعید شعبانی

      دوست عزیز شما می تونید از خاصیت float به شکل زیر در فایل style.css برای کنار هم قرار دادن تصاویر استفاده کنید. البته با این کار ممکن است بخشی از متن پست در کنار تصاویر قرار بگیرد. برای رفع این مشکل باید تغییرات بیشتری در کدهای قالب ایجاد کنید.

      .post-body img {
          float: right;
      }
      
  10. ممنون از پاسختون. خدا خیرتون بده که مشکل ما مبتدی ها رو تو وردپرس حل میکنید.
    یا علی

  11. مژگان

    سلام
    من از قالب سالینت استفاده می کنم خیلی ار قسمت ها نوشته “کلاس” یعنی ما می تونیم کلاس مد نظرمون رو اونجا وارد کنیم اما من نمیدونم که این کلاس ها را چطور باید وارد کنم!!!!
    از صفحه عکس گرفتم
    http://s6.picofile.com/file/8175843784/asas.JPG
    ممنون میشم راهنمایی کنین.

  12. مژگان

    لینک ثبت نام نداره!!!!
    از قسمت ارسال مطلب فرستادم!!!!!۱

    • سعید شعبانی

      واقعا معضرت می خواهم لینک ورود و ثبت نام در پایین انجمن ها و تاپیک ها نبود. شما می تونید از طریق این لینک در سایت عضو بشید و سوالات خودتون را در انجمن مطرح کنید. به خاطر اینکه بتونید جواب سوالتون را دنبال کنید بهتر هست تا عضو بشید و خودتون سوال را بپرسید.

کاربر گرامی برای ارسال دیدگاه اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.