سلام دورود خدمت شما کاربر عزیز

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

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

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

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

کد نمایش جدیدترین مطالب وردپرس

اگر قالب وردپرس شما از تصویر شاخص پشتیبانی نمی کند ابتدا کد زیر رو به فایل functions.php اضافه کنید :

add_theme_support('post-thumbnails');
if ( function_exists('add_theme_support') ) {add_theme_support('post-thumbnails');}

1 2	add_theme_support('post-thumbnails'); if ( function_exists('add_theme_support') ) {add_theme_support('post-thumbnails');}

کدی که در بالا قرار داده شد به فعال سازی تصویر شاخص در وردپرس کمک میکند .

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

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

آموزش تغیر لینک و لوگو ورود به پیشخوان وردپرس + فیلم آموزشی

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

این اموزش که برای شما آماده شده بینهایت جذاب است که میخواهیم توی ساید بار قرار بدیم .

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

کد جدید ترین مطالب وردپرس

آموزش نمایش جدیدترین مطالب در وردپرس

برای شروع کد زیر را داخل هر جا که میخواهید جدیدترین مطالب نمایش داده شود قرار بدید کد html

<aside class="new-post">
    <h2>جدید ترین مطالب</h2>
    <a href="#">
        <figure>
            <img src="" alt="">
            <figcaption>
                <div class="description">
                    <i class="fa fa-envira"></i>
                    <p>text content</p>
                </div>
                <p class="title"> title</p>
            </figcaption>
        </figure>
    </a>
</aside>

<h2>جدید ترین مطالب</h2>

<p>text content</p>

</div>

<p class="title"> title</p>

</figcaption>

</figure>

</a>

</aside>

ما الان فقط یک کد html برای جدیدترین مطالب وردپرس قرار دادیم این کد هیچ کاری انجام نمیده .

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

برای این که یک استایل شیک داشته باشه از کد زیر استفاده کنید :

<style>
    aside.new-post {
        background: #fff;
        border: 2px solid #eee;
        padding: 0 10px;
        box-shadow: 0 0 6px #ccc;
    }
    .new-post h2 {
        border-bottom: 2px dashed #00b9eb91;
        padding-bottom: 5px;
        margin-bottom: 15px;
        font-size: 21px;

    }
    figure {
        -webkit-transition: all 200ms;
        transition: all 200ms;
        display: inline-block;
        background: black;
        width: 100%;
        height: 300px;
        overflow: hidden;
        position: relative;
        border: 4px solid #e2e2e2;
        color: #fff;
        font-weight: 500;
        margin: 10px auto;
    }
    figure:hover {
        border-width: 9px;
    }
    figure:hover .title {
        -webkit-transform: translate(0, 100px);
        transform: translate(0, 100px);
    }
    figure:hover img {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        width: 100%;
        height: auto;
    }
    figure:hover .description {
        opacity: 1;
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }
    figure:hover .iconos {
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
        opacity: 1;
    }
    figure .title {
        position: absolute;
        bottom: 0px;
        padding: 10px;
        width: 100%;
        text-align: center;
        color: #333;
        font-size: 25px;
        -webkit-transition: all 400ms;
        transition: all 400ms;
        background: rgba(255, 255, 255, 0.9);
    }
    figure img {
        width: 100%;
        position: absolute;
        -webkit-transition: all 500ms;
        transition: all 500ms;
    }
<div style="clear:both; margin-top:1.5em; margin-bottom:1.5em;"><a href="https://7reply.com/telegram-for-wp/" target="_blank" rel="dofollow" class="IRPP_ruby"><!-- INLINE RELATED POSTS 2/3 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 0.7; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #C0392B; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #E74C3C; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #000000; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://7reply.com/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div class="postImageUrl" style="background-image:url(https://7reply.com/wp-content/uploads/2018/02/telegram-for-wp.png);"></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText">دوست عزیز پیشنهاد میشه این مطلب را هم ببینید </div><div style="clear:both"></div><div class="postTitle">آموزش اتصال وردپرس به تلگرام</div></div></div><div class="ctaButton"></div></div></a></div>
    .description {
        width: 100%;
        opacity: 0;
        height: auto;
        position: absolute;
        top: 20%;
        left: 0;
        font-size: 20px;
        background: #ff00007a;
        -webkit-transition: all 300ms;
        transition: all 300ms;
        text-align: center;
        padding: 14px;
    }

</style>

<style>

aside.new-post {

background: #fff;

border: 2px solid #eee;

padding: 10px;

box-shadow: 6px #ccc;

}

.new-post h2 {

border-bottom: 2px dashed #00b9eb91;

padding-bottom: 5px;

margin-bottom: 15px;

font-size: 21px;

}

figure {

-webkit-transition: all 200ms;

transition: all 200ms;

display: inline-block;

background: black;

width: 100%;

height: 300px;

overflow: hidden;

position: relative;

border: 4px solid #e2e2e2;

color: #fff;

font-weight: 500;

margin: 10px auto;

}

figure:hover {

border-width: 9px;

}

figure:hover .title {

-webkit-transform: translate(0, 100px);

transform: translate(0, 100px);

}

figure:hover img {

-webkit-transform: scale(1.5);

transform: scale(1.5);

width: 100%;

height: auto;

}

figure:hover .description {

opacity: 1;

-webkit-transform: translateY(-60px);

transform: translateY(-60px);

}

figure:hover .iconos {

-webkit-transform: translateY(-80px);

transform: translateY(-80px);

opacity: 1;

}

figure .title {

position: absolute;

bottom: 0px;

padding: 10px;

width: 100%;

text-align: center;

color: #333;

font-size: 25px;

-webkit-transition: all 400ms;

transition: all 400ms;

background: rgba(255, 255, 255, 0.9);

}

figure img {

width: 100%;

position: absolute;

-webkit-transition: all 500ms;

transition: all 500ms;

}

.description {

width: 100%;

opacity: ;

height: auto;

position: absolute;

top: 20%;

left: ;

font-size: 20px;

background: #ff00007a;

-webkit-transition: all 300ms;

transition: all 300ms;

text-align: center;

padding: 14px;

}

</style>