خانهآموزش وردپرسنمایش تبلیغات در نوشته های وردپرس بدون نصب افزونه
https://rayawp.ir/?p=21622

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

سلام! صبح اولین روز هفته‌ات پر از انرژی و اتفاقای خوب! 🌞 البته من این مقاله رو اول هفته نوشتم، ولی شاید تو هر روزی از هفته اینو بخونی 😁😂 (جواد خیابانی!) آماده‌ای یه ترفند

سلام! صبح اولین روز هفته‌ات پر از انرژی و اتفاقای خوب! 🌞 البته من این مقاله رو اول هفته نوشتم، ولی شاید تو هر روزی از هفته اینو بخونی 😁😂 (جواد خیابانی!)

آماده‌ای یه ترفند خفن یاد بگیری که بدون دردسر و بدون نیاز به هیچ افزونه‌ای، تبلیغات متنی یا تصویری مدنظرت رو به شکلی جذاب و حرفه‌ای توی نوشته‌های وردپرس نمایش بدی؟ 🚀 پس بزن بریم!

چرا روش بدون افزونه؟ 🤔

بهتره من این سوالو ازت بپرسم وقتی می‌تونی با یه کمی کدنویسی، تبلیغاتتو دقیقا اونجایی که می‌خوای نمایش بدی؟ چرا واقعا باید افزونه سنگین نصب کنی؟! اوم؟ استفاده از روش کد نویسی مزایای زیادی داره:

  • سرعت بیشتر: بدون بار اضافی افزونه‌ها، سایتت سریع‌تر لود میشه.
  • کنترل کامل: تو می‌تونی موقعیت دقیق تبلیغاتتو مشخص کنی.
  • سفارشی‌سازی آسان: استایل‌ها و ظاهر تبلیغات رو به سلیقه خودت تغییر بدی.

آموزش نمایش تبلیغات متنی در نوشته‌های وردپرس 👌

اگه می‌خوای یه تبلیغ متنی همراه با دکمه‌ی جذاب برای جلب توجه کاربر توی نوشته‌های وردپرست اضافه کنی، فقط کافیه مراحل زیر رو مو به مو اجرا کنی! 🚀

📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

1️⃣ افزودن کد PHP جهت نمایش تبلیغ متنی درون نوشته ها بعد از چهارمین پاراگراف

خب، حالا وقتشه به سراغ کد بریم! این کد رو به فایل functions.php قالب چایلدت اضافه کن تا تبلیغات متنت بعد از چهارمین پاراگراف هر پست ظاهر بشه:

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

//Insert an ad after the fourth paragraph in the content.
function insert_ad_after_fourth_paragraph($content) {
    if (is_single() && is_main_query()) {
        $paragraphs = explode('</p>', $content);
        if (count($paragraphs) > 4) {
            $insert_index = find_insert_position($paragraphs);
            $ad = generate_ad_html();
            $paragraphs[$insert_index] .= $ad;
        }
        $content = implode('</p>', $paragraphs);
    }
    return $content;
}
function find_insert_position($paragraphs) {
    for ($i = 3; $i < count($paragraphs); $i++) {
        if (strpos($paragraphs[$i], '<blockquote') === false) {
            return $i;
        }
    }
    return 3; 
}
function generate_ad_html() {
    return '<p id="adBanner">
                <button onclick="this.parentElement.style.display=\'none\'">×</button>
                <span class="ad-text">✨آموزش های خاص وردپرس و المنتور رو در رایــا وردپــرس دنبال کنید✨ 
                    <a href="https://rayawp.ir" id="adButton" onmouseover="this.innerHTML=\'بزن بریم\'" onmouseout="this.innerHTML=\'کلیک کن\'">کلیک کن</a>
                </span>
                <span id="adLabel" class="ad-label">AD</span>
            </p>';
}
add_filter('the_content', 'insert_ad_after_fourth_paragraph');
function enqueue_ad_styles() {
    wp_enqueue_style('ad-banner-style', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_ad_styles');

نکته! با ویرایش متن در خط 25 کد بالا می‌تونی متن تبلیغ متنی خودت رو تغییر بدی، و همینطور با اصلاح URL در خط 26 کد بالا، می‌تونی لینک دکمه “کلیک کن” رو تغییر بدی. ✏️🔗

2️⃣ افزودن کد CSS جهت استایلدهی به باکس تبلیغ متنی

برای استایل دادن به باکس تبلیغ متنی از کد CSS زیر استفاده کن. این کد رو میتونی در فایل style.css چایلدتم ات وارد کنی اگه دیدی اعمال نمیشه در بخش “CSS اضافی” در قسمت سفارشی‌سازی وردپرس وارد کن:

#adBanner {
    background: rgba(0, 0, 0, 0.6);
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 50, 0.6));
    padding: 5px 0;
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#adBanner button {
    border-radius: 50px 0 0 50px;
    background-color: #ffffff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #f00;
}

#adButton {
    padding: 2px 8px;
    background-color: #ffffff;
    border-radius: 8px;
    color: black;
    font-weight: bold;
    text-decoration: none;
}

#adButton:hover {
    color: black;
}

#adLabel {
    padding: 0 5px;
    background-color: #ffffff;
    border-radius: 8px;
    color: #020202;
    margin-left: 20px;
}

#adBanner span {
    font-size: 17px;
}

آموزش نمایش تبلیغات بنری در نوشته‌ های وردپرس 🖼️

1️⃣ افزودن کد PHP جهت نمایش تبلیغ تصویری درون نوشته ها

اگه می‌خوای بعد از چهارمین پاراگراف یه تبلیغ بنری یا تصویری نشون بدی که یه دکمه داشته باشه و یه لیبل AD، کافیه کد PHP زیر رو به فایل فانکشن قالب اضافه کنی: 💻🎯

function insert_ad_after_third_paragraph($content) {
    if (is_single() && !is_admin()) {
        $ad_code = '
            <div class="Raya_ad_box">
                <div class="ad-image-container">
                    <img src="https://www.technolife.ir/image/banner_SingleFullWidthBanner_vCNXKK_db2c44e6-339b-4011-9336-67a2a0ef59ee.gif" alt="تبلیغ">
                    <span class="ad-label">AD</span>
                    <a href="https://rayawp.ir" class="ad-button">کلیک کن</a>
                </div>
            </div>';

        $closing_p = '</p>';
        $paragraphs = explode($closing_p, $content);

        if (count($paragraphs) < 3) {
            return $content;
        }

        $new_content = '';
        foreach ($paragraphs as $index => $paragraph) {
            if (trim($paragraph)) {
                $new_content .= $paragraph . $closing_p;
            }
            if ($index == 2) {
                $new_content .= $ad_code;
            }
        }
        return $new_content;
    }
    return $content;
}
add_filter('the_content', 'insert_ad_after_third_paragraph');

نکات مهم درباره کد بالا:

  • اگر می‌خوای لینک دکمه “کلیک کن” رو به آدرس دلخواهت تغییر بدی، کافیه در خط 8 کد بالا به جای https://rayawp.ir آدرس مدنظرت رو قرار بدی. 🔗
  • همینطور با اصلاح URL در خط 6 کد بالا، می‌تونی تصویر مدنظرت رو جایگزین تصویر فعلی کنی. 🖼️

2️⃣ افزودن کد CSS جهت استایلدهی به باکس تبلیغ تصویری

بعد از اضافه کردن کدهای PHP، وقتشه که یه استایل خوشگل هم به باکس تبلیغ تصویریت بدی. برای این کار، کافیه کدهای CSS زیر رو در بخش “CSS اضافی” وردپرس در قسمت سفارشی‌سازی اضافه کنی. 🎨✨

.Raya_ad_box {
    height: auto;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
    margin: 20px 0;
}

.ad-image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.ad-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ad-label {
    position: absolute;
    top: 0;
    right: 0;
    background: #e1e1e1;
    color: #333;
    font-size: 12px;
    padding: 5px 10px;
    border-bottom-left-radius: 6px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
}

.ad-button {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #ff0000;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border: none;
    border-top-right-radius: 6px;
    box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.ad-button:hover {
    background-color: #cc0000;
}

مرسی که تا پایان این آموزش از رایا وردپرس همراه من بودی امیدوارم برات مفید باشه. اگه سوالی یا نظری داشتی خوشحال میشم تو کامنت های این پست جوابتو بدم 🙂 فعلن تا یه آموزش خاص دیگه خدانگهدارت 🌷😊

5/5 - (3 امتیاز)
اگه از مطالب سایت استفاده کردی و کارت رو راه انداخته، می‌تونی با یه حمایت کوچیک بهمون انگیزه بدی تا با قدرت کار تولید محتوای خفن تر و جذاب تر رو پیش ببریم 😉🥰

ارسال نظر ( 0 نظر تایید شده )

نظرات پس از رویت و تایید مدیران نمایش داده می‌شود

📖 آنچه خواهید خواند

Toggle
    42 نفر در حال مطالعه این مقاله
    214 بازدید در 24 ساعت اخیر
    8 نفر این پست رو بوکمارک کردن
    6 دقیقه زمان مطالعه این مطلب
    ما رو در شبکه های اجتماعی دنبال کن 😉❤️
    سعید
    200 مقاله
    سعید

    عاشق یادگیری و پیشرفت در برنامه نویسی و ارتقا مهارت هام هستم. سعی میکنم دانش و تجربیات ارزشمندم رو در رایا وردپرس باهاتون به اشتراک بزارم :)

    بستن