آموزش ایجاد کلاس زوج و فرد برای مطالب وردپرس

the original post that this guy stole from ma can be found here آموزش ایجاد کلاس زوج و فرد برای مطالب وردپرس
read the original and help me out.

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

آموزش ایجاد کلاس زوج و فرد برای مطالب وردپرس

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

اولین سوالی که احتمالا به ذهن شما برسد اینه که چرا استایل مطالب وردپرس را باید به صورت زوج و فرد در آورد ؟ دلیل خاصی دارد ؟
در بسیاری از قالب های وردپرس از کلاس زوج و فرد برای نظرات و دیدگاه ها استفاده می شود که این کار باعث می شود شما مدیران بتوانید به راحتی نظرات را تفکیک و مورد بررسی قرار دهید ، حال شما می توانید این قابلیت را به مطالب وردپرس تعمیم دهید به صورتی که مطالب وب سایت شما در صفحه اصلی سایت به صورت یکی در میان با استایل متفاوتی نمایش داده شود . با انجام این کار شما می توانید زیبایی منحصر بفردی را به وب سایت خود بدهید و کاربران شما بتوانند به راحتی مطالب سایت را مورد بررسی قرار دهند و کاربران از بودن در وب سایت شما لذت می بردند و زمان بیشتری را در سایت شما سپری می کنند تا به مطالب مورد نیاز خود دسترسی پیدا کنند . خب دوستان عزیز حتما شما با مزیت انجام این کار یعنی زوج و فرد کردن کلاس مطالب وردپرس آشنا شدید ، پس بهتره که به بررسی روش انجام این کار بپردازیم .

قطعه کد وردپرس افزودن کلاس های زوج و فرد به مطالب وب سایت در پوسته وردپرس :
برای شروع کار شما تهیه ی نسخه ی پشتیبان را هرگز فراموش نکنید تا در صورت قرار دادن قطعه کد زیر و مشکلی برای شما پیش آمد ، بتوانید وب سایت را به حالت اولیه برگردانید . برای قرار دادن این کد در قالب وردپرس تون به فایل functions.php بروید :

  function oddeven_post_class ( $  classes ) {  global $  current_class;  $  classes[] = $  current_class;  $  current_class = ($  current_class == 'odd') ? 'even' : 'odd';  return $  classes;  }  add_filter ( 'post_class' , 'oddeven_post_class' );  global $  current_class;  $  current_class = 'odd';   

دوستان عزیز شما باید این قطعه کد را در انتهای فایل functiond.php قالب و پیش از بسته شدن یعنی تگ <? قرار دهید . اگر به قطعه کد بالا دقت کنید می توانید دو کلاس مشاهده می کنید که کلاس odd که به معنای فرد می باشد ، به اولین پست سایت بر می گردد و کلاس even به معنای زوج می باشد که به دومین پست سایت اشاره دارد که این روند به صورت یک در میان تا اخرین پست سایت ادامه دارد . به همین ترتیب !!! پس از این که شما از این کد در سایت خو استفاده کردین ، می توانید به راحتی کلاس های زوج و فردی را که در وب سایت شما اضافه شده است را مشاهده کنید . برای درک بهتر این موضوع به این صورت که موس را روی یکی از مطالب تان ببرید و با راست کلیک گزینه inspect element را انتخاب کنید و در اینجا کلاس مطلب خود را مشاهده کنید .

تا به اینجا شما توانستید کلاس زوج و فرد را به مطالب تون اضافه کنید و در ادامه نوبت به استایل دهی به این کلاس ها در css می رسد که این کار را می توانید در فایل style.css اصلی قالب وردپرس تون یا یک child theme انجام دهید . برای مثال کد زیر یک نمونه css از استایل دهی به کلاس زوج و فرد می باشد :

  .even { background:#f0f8ff;   }  .odd {  background:#f4f4fb; }   

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

منبع: بیگ تم ارائه دهنده قالب وردپرس فروشگاهی و پوسته وردپرس خبری

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>