با سلام ، در این آموزش از سری آموزش های هک وردپرس امروز و در این مطلب قصد دایم تا نحوه ساخت و ایجاد کد کوتاه دکمه در وردپرس را ارائه کنیم که در اصل ساخت شورت کد دکمه می باشد با ما هماه باشید و این مطلب را از ابتدا تا انتها مطالعه و کارهای گفته شده را به خوبی انجام دهید تا به راحتی و بدون هیچ دانش کد نویسی بتوانید برای سایت و وردپرس خود شورت کد دکمه ایجاد و از آن در سایت خود استفاده کنید.
روش کار ایجاد کد کوتاه دکمه در وردپرس
ابتدا باید تابع add_shortcode را ایجاد کنیم در حال حاضر فایل function.php قالب وردپرس خود را به حالت ویرایش در آورید و قطعه کد زیر را به آن اضافه کنید.برای دسترسی به این فایل می توانید از مسیر هاست و یا از پیشخوان وردپرس » نمایش » ویرایشگر اقدام کنید.
function greenbutton_shortcode($atts) { extract( shortcode_atts( array( 'link' => 'https://www.uptheme.ir',//مقدار پیشفرض 'color' => 'green', 'title' =>'',//مقدار پیشفرض ), $atts, 'multilink' ) ); return '<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>'; } add_shortcode('green-button', 'greenbutton_shortcode'); // شورت کد دکمه قرمز function redbutton_shortcode($atts) { extract( shortcode_atts( array( 'link' => 'https://www.uptheme.ir',//مقدار پیشفرض 'color' => 'red', 'title' =>'',//مقدار پیشفرض ), $atts, 'multilink' ) ); return '<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>'; } add_shortcode('red-button', 'redbutton_shortcode'); // شورت کد دکمه آبی function bluebutton_shortcode($atts) { extract( shortcode_atts( array( 'link' => 'https://www.uptheme.ir',//مقدار پیشفرض 'color' => 'blue', 'title' =>'',//مقدار پیشفرض ), $atts, 'multilink' ) ); return '<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>'; } add_shortcode('blue-button', 'bluebutton_shortcode'); // شورت کد دکمه مشکی function blackbutton_shortcode($atts) { extract( shortcode_atts( array( 'link' => 'https://www.uptheme.ir', //مقدار پیشفرض 'color' => 'black', 'title'=>'',//مقدار پیشفرض ), $atts, 'multilink' ) ); return '<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>'; } add_shortcode('black-button', 'blackbutton_shortcode');
بعد از قرار دادن کد بالا در داخل فایل فانکشن آن را ذخیره سازی کنید.اگر به کد بالا دقت کنید ما از دکمه های آبی ، سبز ، قرمز و همچنین سیاه استفاده کردیم که شما می توانید رنگ ها را تغییر دهید اما فعلا با ما همراه باشید و آموزش ا دنبال کنید … خب نوبت به قرار دادن کد زیر در یک برگه جای دهید و به ادامه مطلب بروید.
[green-button link="#" title="عنوان مورد نظر"] [red-button link="#" title="عنوان مورد نظر"] [blue-button link="#" title="عنوان مورد نظر"] [black-button link="#" title="عنوان مورد نظر"]
با انجام مراحل گفته شده بالا کار تقریبا به پایان رسیده خب الان برگه را ذخیره کنید و جهت مشاهده نتیجه کار پیشنمایش برگه را ببینید.در پیشنمایش شما دکمه ای نمی بینید و فقط لینک را خواهید دید زیرا هنوز برای دکمه ها استایل تعریف نشده برای این کار از استایل زیر استفاده کنید.
a.button-black { padding: 10px 40px; background: #000; border-radius: 5px; color: #fff; text-decoration: none; font-size: 16px; font-weight: bold; } a.button-green { padding: 10px 40px; background: #54c56d; border-radius: 5px; color: #000; text-decoration: none; font-size: 16px; font-weight: bold; } a.button-red { padding: 10px 40px; background: #cb0005; border-radius: 5px; color: #fff; text-decoration: none; font-size: 16px; font-weight: bold; } a.button-blue { padding: 10px 40px; background: #3fc2da; border-radius: 5px; color: #000; text-decoration: none; font-size: 16px; font-weight: bold; }
خب شما از استایل بالا استفاده کنید و آن را در داخل stily.css خود اضافه و دوباره نتیجه کار را ببینید که لینکها از استایل داده شده بهرمند شده و به خود زیبایی بخشیده.
از این به بعد شما می توانید از شرت کد های بالا که در داخل برگه قرار دادید در هر جا که دوست دارید استفاده کنید و از آن لذت ببرید.به همین راحتی قادر هستید شرت کد دکمه برای وبسایت خود اضافه کنید.
منبع: uptheme مرجع: آموزش وردپرس