آموزش ساخت و نحوه استفاده از شورت کد در وردپرس

سلام

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

آموزش:

• shortcode(شورت کد) چیست؟

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

• ساخت شورت کد اختصاصی

ساخت شورت کد کار سختی نیست، شکل کلی ساخت یک شورت کد بدین صورت است:

function beporsamShortcode() {
    return 'code...';
}
add_shortcode('name', 'beporsamShortcode');

کد بالا را باید در فایل functions.php پوسته خود قرار دهید، در تیکه کد بالا کافیست به جای “… code” کدهای خودتون رو قرار بدید و همچنین به جای “name” نام شورت کد.

مثال: ساخت شورت کد کپی رایت:

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

• ابتدا یک متن می نویسیم و توسط Css استایل ساده ای به آن میدهیم، که در نهایت کد Html,Css ما به صورت زیر می شود:

<style>
.beporsam_botton {
    display: block;direction:rtl;
    font: bold 16px Tahoma;
    letter-spacing:;
    text-decoration: none;
    margin: 20px auto;
    padding: 20px 25px 20px 30px;
    width: 400px;
    border-top-left-radius: 10px 50px;
    border-bottom-left-radius: 10px 50px;
    border-top-right-radius: 10px 50px;
    border-bottom-right-radius: 10px 50px;
    -moz-border-radius-topleft: 10px 50px;
    -moz-border-radius-topright: 10px 50px;
    -moz-border-radius-bottomright: 10px 50px;
    -moz-border-radius-bottomleft: 10px 50px;
	
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.beporsam_botton:hover {
    -moz-border-radius-topleft: 30px 50px;
    -moz-border-radius-topright: 30px 50px;
    -moz-border-radius-bottomright: 30px 50px;
    -moz-border-radius-bottomleft: 30px 50px;
    border-top-left-radius: 30px 50px;
    border-bottom-left-radius: 30px 50px;
    border-top-right-radius: 30px 50px;
    border-bottom-right-radius: 30px 50px;
}
    
.beporsam_botton1 {
    text-decoration: none;
    font: bold 13px Tahoma;
    display: block;
    margin: 20px auto;
    padding: 6px 14px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    width: 100px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-align:center;
	direction: rtl;
}

.beporsam_botton1:hover {
    -moz-border-radius: 5px;
    border-radius: 5px;
}
	
.beporsam_ir {
    color: #fff;
    background: #48C9FF;
    background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%);
    text-shadow: #29a3cc 0 1px 3px;
    -webkit-box-shadow:
        inset 0 1px 0 #38bdf4,
        inset 0 2px 0 #7bdeff,
        0 1px 3px #777,
        0 0px 1px #ccc;
    -moz-box-shadow:
        inset 0 1px 0 #38bdf4,
        inset 0 2px 0 #7bdeff,
        0 1px 3px #777,
        0 0px 1px #ccc;
    box-shadow:
        inset 0 1px 0 #38bdf4,
        inset 0 2px 0 #7bdeff,
        0 1px 3px #777,
        0 0px 1px #ccc;
		width:37%;
		height: auto;
}
     
.info {
    text-align:right;
	margin-top:200px;
}
.info a {
	color: #006CD9;
	text-decoration: none;
}		      	
.info a:hover {
	color:#fff;
	background:#006CD9;
	text-shadow:2px 1px 3px #000;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;border-radius:2px;
	-webkit-transition-property:background;
	-webkit-transition-duration:.3s;
	-webkit-transition-timing-function:linear, ease-in;-moz-transition:background .3s ease-in;-o-transition:background .3s ease-in;
}
</style>
<div class="beporsam_botton1 beporsam_ir"><p>کپي برداري از مطالب سايت بپرسم با ذکر آدرس www.beporsam.ir بلامانع است.</p></div>

خروجی کد بالا، مشابه تصویر زیر است:

همانطور که در بالا گفتیم، شکل کلی کد ساخت شورت کد به صورت زیر است:

function beporsamShortcode() {
    return 'code...';
}
add_shortcode('name', 'beporsamShortcode');

به جای … code کدهایی که در بالا قرار دادیم را جایگزین و همچنین به جای name نام شورت کد، که در اینجا نام شورت کد را copyright میذاریم، در نهایت کد شورت کد ما بدین صورت می شود.

function beporsamShortcode() {
    return '
<style>
.beporsam_botton {
    display: block;direction:rtl;
    font: bold 16px Tahoma;
    letter-spacing:;
    text-decoration: none;
    margin: 20px auto;
    padding: 20px 25px 20px 30px;
    width: 400px;
    border-top-left-radius: 10px 50px;
    border-bottom-left-radius: 10px 50px;
    border-top-right-radius: 10px 50px;
    border-bottom-right-radius: 10px 50px;
    -moz-border-radius-topleft: 10px 50px;
    -moz-border-radius-topright: 10px 50px;
    -moz-border-radius-bottomright: 10px 50px;
    -moz-border-radius-bottomleft: 10px 50px;
	
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.beporsam_botton:hover {
    -moz-border-radius-topleft: 30px 50px;
    -moz-border-radius-topright: 30px 50px;
    -moz-border-radius-bottomright: 30px 50px;
    -moz-border-radius-bottomleft: 30px 50px;
    border-top-left-radius: 30px 50px;
    border-bottom-left-radius: 30px 50px;
    border-top-right-radius: 30px 50px;
    border-bottom-right-radius: 30px 50px;
}
    
.beporsam_botton1 {
    text-decoration: none;
    font: bold 13px Tahoma;
    display: block;
    margin: 20px auto;
    padding: 6px 14px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    width: 100px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-align:center;
	direction: rtl;
}

.beporsam_botton1:hover {
    -moz-border-radius: 5px;
    border-radius: 5px;
}
	
.beporsam_ir {
    color: #fff;
    background: #48C9FF;
    background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%);
    text-shadow: #29a3cc 0 1px 3px;
    -webkit-box-shadow:
        inset 0 1px 0 #38bdf4,
        inset 0 2px 0 #7bdeff,
        0 1px 3px #777,
        0 0px 1px #ccc;
    -moz-box-shadow:
        inset 0 1px 0 #38bdf4,
        inset 0 2px 0 #7bdeff,
        0 1px 3px #777,
        0 0px 1px #ccc;
    box-shadow:
        inset 0 1px 0 #38bdf4,
        inset 0 2px 0 #7bdeff,
        0 1px 3px #777,
        0 0px 1px #ccc;
		width:37%;
		height: auto;
}
     
.info {
    text-align:right;
	margin-top:200px;
}
.info a {
	color: #006CD9;
	text-decoration: none;
}		      	
.info a:hover {
	color:#fff;
	background:#006CD9;
	text-shadow:2px 1px 3px #000;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;border-radius:2px;
	-webkit-transition-property:background;
	-webkit-transition-duration:.3s;
	-webkit-transition-timing-function:linear, ease-in;-moz-transition:background .3s ease-in;-o-transition:background .3s ease-in;
}
</style>
<div class="beporsam_botton1 beporsam_ir"><p>کپي برداري از مطالب سايت بپرسم با ذکر آدرس www.beporsam.ir بلامانع است.</p></div>
	';
}
add_shortcode('copyright', 'beporsamShortcode');

تبریک میگم، تا بجای این کار ما یک شورت کد اختصاصی برای خود ساختیم.

شورت کدی که ساختیم [copyright] است.

• نحوه استفاده از شورت کد

حال که شورت کد را ساختیم، نیاز داریم تا ازش استفاده کنیم، برای استفاده دو راه داریم:

1) استفاده شورت کد در قالب:

می توانیم شورت کد را مستقیما در بین کدهای قالب قرار دهیم، برای مثال میتونیم شورت کد بالا را در فایل single.php بعد از تابع ()the_content قرار بدیم، تا شورت کد ما در آخر همه مطالب قرار گیرد، برای اینکه شورت را بتونید در کدها قرار بدید باید به صورت زیر از آن استفاده کنید:

<?php echo do_shortcode(''); ?>

در کد بالا باید بین ” شورت کد را قرار دهیم.

<?php echo do_shortcode('[copyright]'); ?>

2) استفاده در نوشته و برگه ها:

همچنین شورت کد را می توانیم در برگه ها و در نوشته های سایت قرار بدیم، برای این کار کافیست در هر قسمتی از متن که خواستید شورت کد نمایش داده شود، آن را قرار بدید.

اگر طبق همین مثال پیش رفتید، یک نوشته ایجاد کنید و در انتهای نوشته شورت کد [copyright] را قرلر دهید، تا نتیجه را ببینید.

این بود معرفی، آموزش ساخت و نحوه استفاده از شورت کد در وردپرس.

همراه ما باشید با دیگر آموزش ها …

موفق باشید.