طراحی باکس مقالات حرفه‌ای در المنتور بدون نیاز به افزونه‌های اضافی

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

مراحل طراحی باکس مقالات در المنتور

ایجاد لوپ گرید (Loop Grid)

1. ابتدا در صفحه‌ی ویرایش با المنتور، یک المان لوپ گرید اضافه کنید.
2. روی گزینه‌ی پست کلیک کنید تا محتوای پست‌های سایت شما در این بخش نمایش داده شود.
3. سپس روی Create Template کلیک کنید تا قالب مورد نظر برای نمایش پست‌ها ایجاد شود.

تنظیمات اولیه

1. نام قالب را به عنوان مثال “باکس مقاله” قرار دهید.
2. برای بهتر دیده شدن طراحی، عرض پیش‌نمایش را روی ۳۵۰ پیکسل تنظیم کنید.

افزودن تصویر شاخص

1. یک المان تصویر شاخص به قالب اضافه کنید.
2. در تنظیمات تصویر، رزولوشن را روی کامل قرار دهید.
3. برای لینک‌دهی، از برچسب‌های پویا استفاده کنید و گزینه‌ی Post URL را انتخاب کنید تا کاربر با کلیک روی تصویر به صفحه‌ی پست هدایت شود.
4. برای حالت‌های مختلف (مثل هاور)، می‌توانید افکت‌هایی مانند تار شدن تصویر اعمال کنید.

افزودن عنوان مقاله

1. یک المان متن اضافه کنید و از برچسب‌های پویا برای نمایش عنوان پست استفاده کنید.
2. اندازه‌ی فونت را روی ۱۸ پیکسل و وزن فونت را روی ۵۰۰ تنظیم کنید.
3. برای لینک‌دهی عنوان، از Post URL استفاده کنید.

نمایش زمان مطالعه مقاله

1. برای نمایش زمان مطالعه مقاله، از یک کد کوتاه (Shortcode) استفاده کنید.
2. کد مربوطه را در فایل functions.php قالب فرزند (Child Theme) قرار دهید.

// Add display feature by shortcode
add_shortcode( 'mahmud_read_time', 'amk_calculo_tempo_leitura' );

function amk_calculo_tempo_leitura ( $atts ) {

    // Getting the post content
    $conteudo = get_the_content();

    // Getting the number of words in the content
    $numero_palavras = str_word_count( $conteudo );

    // Getting the estimated reading time, considering 200 words per minute and rounded up.
    $tempo_leitura = ceil( $numero_palavras / 200 );

    // If reading time is less than one minute, I display "less than a minute"
    if ( $tempo_leitura < 1 ) {
        $tempo_leitura = "کمتر از یک دقیقه";
    } else {
        $tempo_leitura = $tempo_leitura . "";
    }

    // Returns the reading time value
    return $tempo_leitura;

}

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

نمایش تعداد بازدید مقاله

1. برای نمایش تعداد بازدید، از افزونه‌ی سبک مانند Post Views Counter استفاده کنید.
2. پس از نصب و فعال‌سازی افزونه، کد کوتاه مربوط به نمایش بازدید ([WPPV-TOTAL-VIEWS]
3. ) را در یک المان متن قرار دهید.
4. برای زیبایی بیشتر، یک آیکون چشم نیز به این بخش اضافه کنید.

تنظیمات ظاهری و فاصله‌ها

1. برای هماهنگی بیشتر عناصر، از تنظیمات فاصله‌ها (Margin و Padding) استفاده کنید.
2. به باکس مقاله سایه‌ی نرم و انحنا (Border Radius) اضافه کنید تا ظاهری مدرن‌تر داشته باشد.

تنظیمات نهایی لوپ گرید

1. در بخش تنظیمات لوپ گرید، تعداد ستون‌ها را روی ۴ قرار دهید.
2. برای نمایش پست‌ها به صورت بی‌نهایت (Infinite Scroll)، گزینه‌ی Scroll Infinite را فعال کنید.
3. در صورت عدم وجود پست، یک پیام مانند “محتوایی برای نمایش وجود ندارد” نمایش دهید.

پیش‌نمایش و انتشار

1. پس از اتمام طراحی، تغییرات را ذخیره کرده و صفحه را منتشر کنید.
2. در حالت‌های مختلف (دسکتاپ، موبایل و تبلت) طراحی را بررسی کنید تا از رسپانسیو بودن آن مطمئن شوید.

نتیجه‌گیری

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

اگر سوالی دارید یا به راهنمایی بیشتری نیاز دارید، در بخش نظرات مطرح کنید. من در سریع‌ترین زمان ممکن پاسخ شما را خواهم داد.

همچنین، برای دریافت کدها و آموزش‌های بیشتر، حتماً در کانال تلگرام من عضو شوید. امیدوارم این آموزش برای شما مفید بوده باشد! 😊