آموزش ساخت و نحوه استفاده از شورت کد در وردپرس
سلام
حتما تا بحال کلمه شورت کد به گوشتون خورده و یا با پلاگین هایی کار کردید که به شما شورت کد میدادند و شما می تونستید از اون شورت کد در قالب، یا صفحات سایت استفاده کنید، امروز قصد داریم تا شما را با مفهوم کامل شورت کد آشنا و همچنین نحوه ی ساخت یک شورت کد را توضیح دهیم، پس در ادامه همراه بپرسم باشید.
آموزش:
- shortcode(شورت کد) چیست؟
شورت کد یا کدکوتاه قطعه کدی است از پیش برنامه نویسی شده که آن را میتوانیم در قالب و صفحات سایت قرار دهیم، اگر بخواهیم مثالی بزنیم، حتما تا بحال از افزونه های فرم ساز نظیر فرم تماس ۷، گروایتی فرم و … استفاده کردید، وقتی توسط یکی از این دو افزونه فرم تماسی درست میکنید، افزونه به ما یک شورت کد تحویل میدهد که می توانیم این شورت کد را در قالب، برگه ها یا صفحات سایت استفاده کنیم.
- ساخت شورت کد اختصاصی
ساخت شورت کد کار سختی نیست، شکل کلی ساخت یک شورت کد بدین صورت است:
۱ ۲ ۳ ۴ |
function beporsamShortcode() { return 'code...'; } add_shortcode('name', 'beporsamShortcode'); |
کد بالا را باید در فایل functions.php پوسته خود قرار دهید، در تیکه کد بالا کافیست به جای “… code” کدهای خودتون رو قرار بدید و همچنین به جای “name” نام شورت کد.
مثال: ساخت شورت کد کپی رایت:
اگر شما هم مثال ما جزو معدود کسانی هستید که مطالب سایتشان اختصاصی و برای تولید مطالب زحمت زیادی می کشند، حتما دوست دارید که در آخر هر پست متنی به عنوان کپی رایت بنویسید، در این مثال می خواهیم یک شورت کد کپی رایت ایجاد کنیم.
- ابتدا یک متن می نویسیم و توسط Css استایل ساده ای به آن میدهیم، که در نهایت کد Html,Css ما به صورت زیر می شود:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ ۸۰ ۸۱ ۸۲ ۸۳ ۸۴ ۸۵ ۸۶ ۸۷ ۸۸ ۸۹ ۹۰ ۹۱ ۹۲ ۹۳ ۹۴ ۹۵ ۹۶ ۹۷ ۹۸ ۹۹ ۱۰۰ ۱۰۱ ۱۰۲ ۱۰۳ ۱۰۴ ۱۰۵ ۱۰۶ ۱۰۷ |
<style> .beporsam_botton { display: block;direction:rtl; font: bold ۱۶px Tahoma; letter-spacing:; text-decoration: none; margin: ۲۰px auto; padding: ۲۰px ۲۵px ۲۰px ۳۰px; width: ۴۰۰px; border-top-left-radius: ۱۰px ۵۰px; border-bottom-left-radius: ۱۰px ۵۰px; border-top-right-radius: ۱۰px ۵۰px; border-bottom-right-radius: ۱۰px ۵۰px; -moz-border-radius-topleft: ۱۰px ۵۰px; -moz-border-radius-topright: ۱۰px ۵۰px; -moz-border-radius-bottomright: ۱۰px ۵۰px; -moz-border-radius-bottomleft: ۱۰px ۵۰px; -webkit-transition: all ۰.۵s ease; -moz-transition: all ۰.۵s ease; -ms-transition: all ۰.۵s ease; -o-transition: all ۰.۵s ease; transition: all ۰.۵s ease; } .beporsam_botton:hover { -moz-border-radius-topleft: ۳۰px ۵۰px; -moz-border-radius-topright: ۳۰px ۵۰px; -moz-border-radius-bottomright: ۳۰px ۵۰px; -moz-border-radius-bottomleft: ۳۰px ۵۰px; border-top-left-radius: ۳۰px ۵۰px; border-bottom-left-radius: ۳۰px ۵۰px; border-top-right-radius: ۳۰px ۵۰px; border-bottom-right-radius: ۳۰px ۵۰px; } .beporsam_botton1 { text-decoration: none; font: bold ۱۳px Tahoma; display: block; margin: ۲۰px auto; padding: ۶px ۱۴px; -moz-border-radius: ۱۵px; border-radius: ۱۵px; width: ۱۰۰px; -webkit-transition: all ۰.۵s ease; -moz-transition: all ۰.۵s ease; -ms-transition: all ۰.۵s ease; -o-transition: all ۰.۵s ease; transition: all ۰.۵s ease; text-align:center; direction: rtl; } .beporsam_botton1:hover { -moz-border-radius: ۵px; border-radius: ۵px; } .beporsam_ir { color: #fff; background: #۴۸C9FF; background: -webkit-linear-gradient(top, #۴۸C9FF ۰%, #۲EA8E5 ۱۰۰%); background: -moz-linear-gradient(top, #۴۸C9FF ۰%, #۲EA8E5 ۱۰۰%); background: -ms-linear-gradient(top, #۴۸C9FF ۰%, #۲EA8E5 ۱۰۰%); background: -o-linear-gradient(top, #۴۸C9FF ۰%, #۲EA8E5 ۱۰۰%); background: linear-gradient(to bottom, #۴۸C9FF ۰%, #۲EA8E5 ۱۰۰%); text-shadow: #۲۹a3cc ۰ ۱px ۳px; -webkit-box-shadow: inset ۰ ۱px ۰ #۳۸bdf4, inset ۰ ۲px ۰ #۷bdeff, ۰ ۱px ۳px #۷۷۷, ۰ 0px ۱px #ccc; -moz-box-shadow: inset ۰ ۱px ۰ #۳۸bdf4, inset ۰ ۲px ۰ #۷bdeff, ۰ ۱px ۳px #۷۷۷, ۰ 0px ۱px #ccc; box-shadow: inset ۰ ۱px ۰ #۳۸bdf4, inset ۰ ۲px ۰ #۷bdeff, ۰ ۱px ۳px #۷۷۷, ۰ 0px ۱px #ccc; width:۳۷%; height: auto; } .info { text-align:right; margin-top:۲۰۰px; } .info a { color: #۰۰۶CD9; text-decoration: none; } .info a:hover { color:#fff; background:#۰۰۶CD9; text-shadow:۲px ۱px ۳px #۰۰۰; -moz-border-radius:۵px; -webkit-border-radius:۵px;border-radius:۲px; -webkit-transition-property:background; -webkit-transition-duration:.۳s; -webkit-transition-timing-function:linear, ease-in;-moz-transition:background .۳s ease-in;-o-transition:background .۳s 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 ۱۶px Tahoma; letter-spacing:; text-decoration: none; margin: ۲۰px auto; padding: ۲۰px ۲۵px ۲۰px ۳۰px; width: ۴۰۰px; border-top-left-radius: ۱۰px ۵۰px; border-bottom-left-radius: ۱۰px ۵۰px; border-top-right-radius: ۱۰px ۵۰px; border-bottom-right-radius: ۱۰px ۵۰px; -moz-border-radius-topleft: ۱۰px ۵۰px; -moz-border-radius-topright: ۱۰px ۵۰px; -moz-border-radius-bottomright: ۱۰px ۵۰px; -moz-border-radius-bottomleft: ۱۰px ۵۰px; -webkit-transition: all ۰.۵s ease; -moz-transition: all ۰.۵s ease; -ms-transition: all ۰.۵s ease; -o-transition: all ۰.۵s ease; transition: all ۰.۵s ease; } .beporsam_botton:hover { -moz-border-radius-topleft: ۳۰px ۵۰px; -moz-border-radius-topright: ۳۰px ۵۰px; -moz-border-radius-bottomright: ۳۰px ۵۰px; -moz-border-radius-bottomleft: ۳۰px ۵۰px; border-top-left-radius: ۳۰px ۵۰px; border-bottom-left-radius: ۳۰px ۵۰px; border-top-right-radius: ۳۰px ۵۰px; border-bottom-right-radius: ۳۰px ۵۰px; } .beporsam_botton1 { text-decoration: none; font: bold ۱۳px Tahoma; display: block; margin: ۲۰px auto; padding: ۶px ۱۴px; -moz-border-radius: ۱۵px; border-radius: ۱۵px; width: ۱۰۰px; -webkit-transition: all ۰.۵s ease; -moz-transition: all ۰.۵s ease; -ms-transition: all ۰.۵s ease; -o-transition: all ۰.۵s ease; transition: all ۰.۵s ease; text-align:center; direction: rtl; } .beporsam_botton1:hover { -moz-border-radius: ۵px; border-radius: ۵px; } .beporsam_ir { color: #fff; background: #۴۸C9FF; background: -webkit-linear-gradient(top, #۴۸C9FF ۰%, #۲EA8E5 ۱۰۰%); background: -moz-linear-gradient(top, #۴۸C9FF ۰%, #۲EA8E5 ۱۰۰%); background: -ms-linear-gradient(top, #۴۸C9FF ۰%, #۲EA8E5 ۱۰۰%); background: -o-linear-gradient(top, #۴۸C9FF ۰%, #۲EA8E5 ۱۰۰%); background: linear-gradient(to bottom, #۴۸C9FF ۰%, #۲EA8E5 ۱۰۰%); text-shadow: #۲۹a3cc ۰ ۱px ۳px; -webkit-box-shadow: inset ۰ ۱px ۰ #۳۸bdf4, inset ۰ ۲px ۰ #۷bdeff, ۰ ۱px ۳px #۷۷۷, ۰ 0px ۱px #ccc; -moz-box-shadow: inset ۰ ۱px ۰ #۳۸bdf4, inset ۰ ۲px ۰ #۷bdeff, ۰ ۱px ۳px #۷۷۷, ۰ 0px ۱px #ccc; box-shadow: inset ۰ ۱px ۰ #۳۸bdf4, inset ۰ ۲px ۰ #۷bdeff, ۰ ۱px ۳px #۷۷۷, ۰ 0px ۱px #ccc; width:۳۷%; height: auto; } .info { text-align:right; margin-top:۲۰۰px; } .info a { color: #۰۰۶CD9; text-decoration: none; } .info a:hover { color:#fff; background:#۰۰۶CD9; text-shadow:۲px ۱px ۳px #۰۰۰; -moz-border-radius:۵px; -webkit-border-radius:۵px;border-radius:۲px; -webkit-transition-property:background; -webkit-transition-duration:.۳s; -webkit-transition-timing-function:linear, ease-in;-moz-transition:background .۳s ease-in;-o-transition:background .۳s ease-in; } </style> <div class="beporsam_botton1 beporsam_ir"><p>کپی برداری از مطالب سایت بپرسم با ذکر آدرس www.beporsam.ir بلامانع است.</p></div> '; } add_shortcode('copyright', 'beporsamShortcode'); |
تبریک میگم، تا بجای این کار ما یک شورت کد اختصاصی برای خود ساختیم.
شورت کدی که ساختیم [copyright] است.
- نحوه استفاده از شورت کد
حال که شورت کد را ساختیم، نیاز داریم تا ازش استفاده کنیم، برای استفاده دو راه داریم:
۱) استفاده شورت کد در قالب:
می توانیم شورت کد را مستقیما در بین کدهای قالب قرار دهیم، برای مثال میتونیم شورت کد بالا را در فایل single.php بعد از تابع ()the_content قرار بدیم، تا شورت کد ما در آخر همه مطالب قرار گیرد، برای اینکه شورت را بتونید در کدها قرار بدید باید به صورت زیر از آن استفاده کنید:
۱ |
<?php echo do_shortcode(''); ?> |
در کد بالا باید بین ” شورت کد را قرار دهیم.
۱ |
<?php echo do_shortcode('[copyright]'); ?> |
۲) استفاده در نوشته و برگه ها:
همچنین شورت کد را می توانیم در برگه ها و در نوشته های سایت قرار بدیم، برای این کار کافیست در هر قسمتی از متن که خواستید شورت کد نمایش داده شود، آن را قرار بدید.
اگر طبق همین مثال پیش رفتید، یک نوشته ایجاد کنید و در انتهای نوشته شورت کد [copyright] را قرلر دهید، تا نتیجه را ببینید.
این بود معرفی، آموزش ساخت و نحوه استفاده از شورت کد در وردپرس.
همراه ما باشید با دیگر آموزش ها …
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید