آیا می خواهید کلاس های زوج و فرد را به مقاله هایی در مورد موضوع خود اضافه کنید وبلاگ وردپرس ? افزودن کلاس به شما امکان می دهد برای هر مقاله یک استایل خاص نشان دهید.
در این آموزش نحوه نمایش کلاسهای یکسان یا عجیب در وردپرس به شما نشان خواهیم داد.
چرا کلاس اضافه می کنیم؟ جفت "یا" عجیب و غریب » در موضوع شما وبلاگ وردپرس ?
بسیاری مضامین وردپرس از یک کلاس قدیمی یا مشابه برای نظرات وردپرس استفاده کنید. این به کاربران اجازه می دهد تا ببینند یک نظر در کجا به پایان می رسد و دیگری شروع می شود.
به همین ترتیب ، می توانید از این روش برای مقالات خود استفاده کنید. از نظر زیبایی شناختی به نظر می رسد که به شما اجازه می دهد کاربران صفحات بزرگ را به سرعت اسکن کنند. این به ویژه برای صفحه اصلی سایت های روزنامه یا مجله بسیار مفید است.
با این اوصاف، نحوه اضافه کردن کلاس را در مقالات خود خواهیم دید وبلاگ وردپرس.
چگونه یک کلاس حتی / عجیب و غریب در وردپرس اضافه کنیم
وردپرس کلاسهای CSS پیش فرض را ایجاد می کند و آنها را به مقالات مختلف در وب سایت شما در پرواز اضافه می کند. این کلاسهای CSS به افزونه ها و برنامه نویسان کمک می کند تا سبک های خاص خود را به هر مقاله متفاوت اضافه کنند.
WordPress همچنین تابعی به نام " post_class که توسط برنامه نویسان موضوع برای افزودن کلاس به مقالات استفاده می شود.
عملکرد post_class همچنین یک فیلتر است ، به این معنی که می توانید با آن دستکاری کنید. این دقیقاً همان کاری است که ما در اینجا می خواهیم انجام دهیم.
فقط این کد را به فایل functions.php خود اضافه کنید. تم وردپرس.
تابع oddeven_post_class ($ کلاس ها) {global $ current_class؛ $ classes [] = $ current_class؛ $ current_class = ($ current_class == 'odd')؟ "حتی": "عجیب"؛ بازگشت کلاس $؛ } add_filter ('post_class'، 'oddeven_post_class')؛ جهانی $ current_class؛ $ current_class = 'odd'؛
این تابع به سادگی یک کلاس را به عناصر عجیب و غریب اضافه می کند.
کلاسهای فرد و زوج را در کد منبع سایت خود پیدا خواهید کرد. فقط ماوس را به سمت عنوان مقاله ببرید ، سپس برای بازرسی مورد کلیک راست کنید.
اکنون که کلاسهای فرد و زوج را به مقالات خود اضافه کرده اید. گام بعدی این است که به آنها یک سبک منحصر به فرد با CSS بدهید. می توانید کد CSS سفارشی خود را بر روی تم کودک خود یا با استفاده از یک پلاگین ساده CSS اضافه کنید.
در اینجا نمونه ای از کد CSS است که می توانید به عنوان نقطه شروع استفاده کنید:
.even {background: #f0f8ff؛ } .odd {background: #f4f4fb؛ }
در اینجا چگونگی نتیجه می تواند ارائه شود:
برای کسب نتایج خوب به کمی تمرین نیاز خواهید داشت ، اما برای این کار باید به CSS تسلط داشته باشید یا فقط از ابزاری مانند آن استفاده کنید قهرمان CSS.
به همین سادگی است امیدوارم این آموزش کمک شایانی به شما کند. در صورت تمایل به ما سؤال بپرسید یا این آموزش را با دوستان خود در شبکه های اجتماعی مورد علاقه خود به اشتراک بگذارید.
