نوع نمایش متفاوت مطالب وردپرس

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

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

ما برای انجام این کار نیاز به افزودن کد های سفارشی css و همچنین ابزار inspect که در گوگل کروم و فایرفاکس و… به راحتی در دسترس است. با ما همراه باشید تا یکی دیگر از آموزش های وردپرس را ارائه دهیم .

ظاهر پست ها در وردپرس

وردپرس به طور اختصاصی برای ظاهر یک نوشته به صورت پیش فرض کلاس های css تعریف کرده است که یک سایت استاندارد دارای این کلاس های css در بخش های بدنه اصلی، نوشته ها، برگه ها، فهرست، ابزارک ها و… می باشد.
در دسته ی وردپرس عملکرد post_class () برای استفاده در قالب و جهت افزودن کلاس های css سفارشی در برگه و پست ها به کار می رود و فراخوانی می شود.
اگر شما به سایت خود مراجعه کرده و از ابزار inspect در مرورگر خود بهره بگیرید کلاس css مورد نظر در پست ها را مشاهده خواهید کرد.
با استفاده از زیر کلاس های css که در دید کاربران ظاهر می شود می توان مقدمات نمایش متفاوت پست ها در وردپرس را فراهم ساخت.

• post-id.
• post.
• attachment.
• sticky.
• (hentry (hAtom microformat pages.
• category-ID.
• category-name.
• tag-name.
• {format-{format-name.
• {type-{post-type-name.
• has-post-thumbnail.
• post-password-required.
• post-password-protected.

مثالی از خروجی آنها

<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">

شما به راحتی می توانید ظاهر و استايل پست های خود را به صورت واکنش گرا تغییر دهید.
اگر بخواهید یک نوشته را به صورت متفاوت نشان دهید می توانید از کد زیر استفاده کنید

<div class="container"><div class="line number1 index0 alt2"><code class="php plain">.post-412 { </code></div><div class="line number2 index1 alt1"><code class="php plain">background-color: #FF0303;</code></div><div class="line number3 index2 alt2"><code class="php plain">color:#FFFFFF; </code></div><div class="line number4 index3 alt1"><code class="php plain">} </code></div><div class="line number4 index3 alt1">

توجه داشته باشید شما باید آی دی پست خود را تغییر دهید.
به این مثال توجه فرمایید
ما تصمیم داریم ظاهر تمام نوشته های دسته اخبار را تغییر دهیم که این را با اضافه کردن css های سفارشی به قالب انجام خواهیم داد.

<div class="container"><div class="line number1 index0 alt2"><code class="php plain">.category-news{ </code></div><div class="line number2 index1 alt1"><code class="php plain">font-size: 18px;</code></div><div class="line number3 index2 alt2"><code class="php plain">font-style: italic;</code></div><div class="line number4 index3 alt1"><code class="php plain">} </code></div><div class="line number4 index3 alt1">

عملکرد کلاس هر پست

توسعه دهندگان قالب از post class برای اضافه کردن کلاس به نوشته استفاده می کنند که معمولا با تگ <article > می باشد چرا که این عملگر تنها برای بارگذاری به صورت پیش فرض نیست بلکه برای کلاس اختصاصی نیز استفاده خواهد شد تا پست های شما را به صورت متفاوت نمایش دهد.
شما با توجه به قالب سایت خود می توانید این عملگر را در single. Php بیابید کد به صورت زیر است

<article id="post-<?php the_ID();?>"<?php post_class();?>>

شما به راحتی می توانید کد اختصاصی خود را به آن اضافه کنید

<article id="post-<?php the_ID();?>"<?php post_class('longform-article');?>>

عملگر post class می تواند هر حالت سفارشی که شما به آن می دهید را اجرا کند.
اگر شما مایل باشید از عملکرد های چند تایی و یا چند منظوره استفاده کنید می توانید از چند ارایه کمک گرفته و این کار را انجام دهید.

<?php $custom_classes = array('longform-article','featured-story','interactive',);?>
<article id="post-<?php the_ID();?>"<?php post_class($custom_classes);?>>

تغییر ظاهر پست نویسندگان

این کلاس به طور پیش فرض دارای نام نویسنده نیست چنانچه شما بخواهید آن را سفارشی کنید ابتدا باید آن را به صورت the _ post بیابید و کد زیر را در آن تغییر دهید

<?php $author=get_the_author_meta('user_nicename');?>
<article id="post-<?php the_ID();?>"<?php post_class($author);?>>

ظاهر پست ها بر اساس محبوبیت نظرات

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

<div class="container"><div class="line number1 index0 alt2"><code class="php plain">&amp;lt;?php </code></div><div class="line number2 index1 alt1"><code class="php spaces">&nbsp;</code><code class="php variable">$postid</code> <code class="php plain">= get_the_ID();</code></div><div class="line number3 index2 alt2"><code class="php spaces">&nbsp;</code><code class="php variable">$total_comment_count</code> <code class="php plain">= wp_count_comments(</code><code class="php variable">$postid</code><code class="php plain">);</code></div><div class="line number4 index3 alt1"><code class="php spaces">&nbsp;</code><code class="php variable">$my_comment_count</code> <code class="php plain">= </code><code class="php variable">$total_comment_count</code><code class="php plain">-&amp;gt;approved;</code></div><div class="line number5 index4 alt2"><code class="php spaces">&nbsp;</code><code class="php keyword">if</code> <code class="php plain">(</code><code class="php variable">$my_comment_count</code> <code class="php plain">&amp;lt;10){</code></div><div class="line number6 index5 alt1"><code class="php spaces">&nbsp;</code><code class="php variable">$my_comment_count</code> <code class="php plain">= </code><code class="php string">'new'</code><code class="php plain">;</code></div><div class="line number7 index6 alt2"><code class="php spaces">&nbsp;</code><code class="php plain">} </code><code class="php keyword">elseif</code> <code class="php plain">(</code><code class="php variable">$my_comment_count</code> <code class="php plain">&amp;gt;= 10 &amp;amp;&amp;amp; </code><code class="php variable">$my_comment_count</code> <code class="php plain">&amp;lt;20){</code></div><div class="line number8 index7 alt1"><code class="php spaces">&nbsp;</code><code class="php variable">$my_comment_count</code> <code class="php plain">= </code><code class="php string">'emerging'</code><code class="php plain">;</code></div><div class="line number9 index8 alt2"><code class="php spaces">&nbsp;</code><code class="php plain">} </code><code class="php keyword">elseif</code> <code class="php plain">(</code><code class="php variable">$my_comment_count</code> <code class="php plain">&amp;gt;= 20){</code></div><div class="line number10 index9 alt1"><code class="php spaces">&nbsp;</code><code class="php variable">$my_comment_count</code> <code class="php plain">= </code><code class="php string">'popular'</code><code class="php plain">;</code></div><div class="line number11 index10 alt2"><code class="php spaces">&nbsp;</code><code class="php plain">}</code></div><div class="line number12 index11 alt1"><code class="php plain">?&amp;gt;</code></div><div class="line number12 index11 alt1">

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

باتشکر از همراهی شما – شادباشید.

منبع: آپ تم مرجع:آموزش وردپرس