نحوه ایجاد کد کوتاه در وردپرس

آیا می خواهید یاد بگیرید که چگونه یک کد کوتاه در وردپرس ایجاد کنید؟

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

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

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

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

سپس به این دلیل که چرا ما اینجا هستیم

کدهای کوتاه وردپرس چیست؟

کدهای کوتاه وردپرس به عنوان میانبر عمل می کنند که به شما امکان می دهد عناصر را به سرعت در یک پست یا صفحه جاسازی کنید. اینها معمولاً یک خط کد هستند که در براکت‌های مربع محصور شده‌اند. مثلا :

[exemplecodehortcode]

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

وردپرس اولین بار کدهای کوتاه را معرفی کرد با انتشار Shortcode API. این امر باعث شد تا کاربران بتوانند عناصر جذابی را به پست ها و صفحات خود اضافه کنند، مانند نقشه های گوگل یا دکمه "پسندیدن" فیس بوک.

در وردپرس وجود دارد پیش فرضt شش کد کوتاه  :

• عنوان: زیرنویس ها را در اطراف محتوا قرار دهید
• گالری : گالری تصاویر را نمایش می دهد
• : فایل های صوتی را جاسازی و پخش می کند
• تصویری : فایل های ویدئویی را جاسازی و پخش می کند
• پخش : مجموعه ای از فایل های صوتی یا تصویری را نمایش می دهد
• جاسازی کردن : عناصر درون خطی را می پیچد

همچنین با دو نوع اصلی قالب‌بندی کد کوتاه مواجه خواهید شد: self-closing et enclosing.

کدهای کوتاه self-closing می توانند به تنهایی بایستند و نیازی به برچسب بسته شدن ندارند.

در همین حال، enclosing محتوایی را که می خواهید ویرایش کنید را احاطه کنید و مجبور شوید برچسب را به صورت دستی ببندید. به عنوان مثال، می‌توانید یک ویدیوی YouTube را با قرار دادن URL بین برچسب‌ها جاسازی کنید embed et /embed :

به عنوان مثال، این نتیجه زیر را ایجاد می کند:

بعضی از بهترین افزونه های وردپرس با کدهای کوتاه خود می آیند. برای مثال، فرم های WP et فرم تماس با 7 کدهای کوتاهی دارند که به شما امکان می دهد به سرعت یک را جاسازی کنید فرم تماس در یک پست یا صفحه شما همچنین می توانید از یک افزونه مانند استفاده کنید MaxButtons برای اضافه کردن یک کد کوتاه دکمه در هر کجا که می خواهید در وب سایت خود.

چرا باید از کدهای کوتاه وردپرس استفاده کنید؟

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

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

لازم به ذکر است که ویراستار گوتنبرگ با تکیه بر استفاده از کدهای کوتاه به همین صورت کار می کند. این به کاربران وردپرس اجازه می دهد تا چندین ویژگی تعاملی را از طریق استفاده از بلوک ها اضافه کنند.

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

نحوه ایجاد کد کوتاه در وردپرس

اگر از قبل دانش کدنویسی دارید، می توانید کدهای کوتاه سفارشی خود را ایجاد کنید. این به شما کنترل کامل بر ظاهر و عملکرد وب سایت خود می دهد.

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

مرحله 1 - یک فایل تم جدید ایجاد کنید

قبل از شروع، ایده خوبی است که به طور کامل از وب سایت وردپرس خود نسخه پشتیبان تهیه کنید. همچنین باید یک فایل جداگانه برای کد کوتاه سفارشی خود خارج از فایل ایجاد کنید  functions.php خود را تم وردپرس. این یک راه حل بازگشتی در صورت بروز مشکل ارائه می دهد.

می توانید از مشتری استفاده کنید FTP (پروتکل انتقال فایل) مانند فایلزیلا برای دسترسی به فایل های تم وب سایت خود. پس از ورود به وب سایت خود، به موضوعات wp-content> و پوشه تم فعلی خود را پیدا کنید. در مثال ما، این خواهد بود جغد فشار:

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

فایل جدید خود را نام ببرید custom-shortcodes.php سپس کلیک کنید OK. سپس می توانید با کلیک راست روی آن و انتخاب گزینه آن را ویرایش کنید مشاهده/ویرایش :

با این کار فایل در ویرایشگر متن پیش فرض شما باز می شود. سپس شما فقط باید بلوک کد زیر را اضافه کنید:

<?php ?>

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

سپس می توانید تغییرات خود را ذخیره کرده و فایل را ببندید. حتماً کادر زیر را علامت بزنید تا مطمئن شوید که در سرور به روز می شود و در وب سایت شما اعمال می شود:

سپس فایل را باز کنید functions.php در همان پوشه theme و خط کد زیر را در پایین سند اضافه کنید:

include('shortcodes-personnalises.php');

این به سیستم می‌گوید که هر تغییری را که در فایل ایجاد می‌کنید شامل شود custom-shortcodes.php به functions.php در حالی که به شما اجازه می دهد آنها را از هم جدا کنید. وقتی آماده شدید، تغییرات خود را ذخیره کرده و فایل را ببندید.

مرحله 2 - تابع Shortcode را ایجاد کنید

در مرحله بعد، باید تابع کد کوتاه را ایجاد کنید و به آن دستور دهید که چه کاری انجام دهد. دوباره گزینه را انتخاب کنید مشاهده/ویرایش از پرونده شما custom-shortcodes.php. از قطعه کد زیر برای اضافه کردن یک عمل برای قلاب کردن تابع خود استفاده کنید:

function subscribe_link(){
    return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
    }

در مرحله بعد، باید یک تابع پاسخ به تماس اضافه کنید، که با فعال شدن قلاب اجرا می شود. افزودن خط کد زیر مستقیماً بعد از کد ذکر شده در بالا به وردپرس می گوید که عملکرد شما یک کد کوتاه است:

add_shortcode('sabonner', 'subscribe_link');

هنگامی که با استفاده از تابع یک کد کوتاه ایجاد می کنید add_shortcode، شما یک تگ کد کوتاه اختصاص می دهید ($tag) "و یک قلاب تابع مربوطه" ($func) که با هر بار استفاده از میانبر اجرا می شود.

به عبارت دیگر، اگر تگ کد کوتاه [subscribe] باشد، پس قلاب 'subscribe_link' بازدید کننده را به URL ارائه شده هدایت می کند.

بنابراین کل کدی که در فایل خود استفاده می کنید shortcodes-personnalises.php به این صورت خواهد بود:

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

مرحله 3 - کد کوتاه Self-Close را به وب سایت اضافه کنید

اکنون می توانید کد اولیه خود را به عنوان یک کد کوتاه خود بسته در سایت وردپرس خود آزمایش کنید. با استفاده از ویرایشگر بلوک وردپرس، می توانید برچسب [subscribe] را مستقیماً در پست وارد کنید:

با این کار محتوای زیر برای بازدیدکنندگان وب سایت شما نمایش داده می شود:

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

مرحله 4 - پارامترها را به Shortcode اضافه کنید

می توانید کد کوتاه را تطبیق دهید "اشتراک در" برای عملکرد اضافی برای نمایش سایر پیوندهای رسانه های اجتماعی. می توانید این کار را با افزودن یک پارامتر برای تغییر URL انجام دهید.

ریختن اضافه کردن ویژگی های مدیریت، باید فایل را باز کنید custom-shortcodes.php و کد زیر را اضافه کنید:

function subscribe_link_att($atts) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');

این به شما امکان می دهد پیوندهای موجود در تگ کد کوتاه خود را سفارشی کنید تا آنها را به ویرایشگر گوتنبرگ اضافه کنید. می توانید آن را روی کد قبلی در فایل قرار دهید custom-shortcodes.php. باید چیزی شبیه به این باشد:

اضافه کردن تابع shortcode_atts(). ویژگی های کاربر را با تمام ویژگی های شناخته شده ترکیب می کند و هر داده از دست رفته با مقادیر پیش فرض آنها جایگزین می شود. وقتی آماده شدید، تغییرات خود را ذخیره کرده و فایل را ببندید.

مرحله 5 - تنظیمات را تست کنید

اکنون می توانید کد کوتاه به روز شده را در ویرایشگر بلاک وردپرس آزمایش کنید. در مثال ما، پیوندهای توییتر و فیس بوک خود را با کدهای کوتاه زیر آزمایش می کنیم:

[لینک اشتراک='https://www.facebook.com/live.blogpascher']فیس بوک[/subscribe]

[لینک اشتراک='https://twitter.com/BlogPasCher']توئیتر[/subscribe]

این نتیجه زیر را در قسمت جلویی ایجاد می کند:

این کد کوتاه خود بسته، URL های مستقیم پروفایل های اجتماعی شما را به بازدیدکنندگان نمایش می دهد. با این حال، ممکن است بخواهید این ویژگی کمی صیقلی به نظر برسد.

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

مرحله 6 - کد کوتاه محصور را ایجاد کنید

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

ابتدا باید اضافه کنید $content = null، که این تابع را به عنوان یک کد کوتاه محصور کننده شناسایی می کند. سپس می توانید اضافه کنید do_shortcode از وردپرس، که محتوا را برای کدهای کوتاه جستجو می کند.

در پرونده custom-shortcodes.php، کد کوتاه جدید را اضافه کنید:

function subscribe_link_att($atts, $content = null) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    $content = do_shortcode($content);
    return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');

وقتی آماده شدید، فایل خود را custom-shortcodes.php باید شبیه این باشد:

کد قبلی یک ویژگی دارد " سبک " اضافی، که متن لنگر را به رنگ آبی تغییر می دهد. فراموش نکنید که پس از پایان کار، تغییرات خود را ذخیره کنید.

مرحله 7 - کد کوتاه ضمیمه را به وب سایت اضافه کنید

اکنون می توانید کد کوتاه خود را در ویرایشگر بلوک وردپرس وارد کنید تا نتیجه نهایی را ببینید:

همانطور که متوجه شدید، می توانید به راحتی آدرس های صفحه رسانه های اجتماعی خود و متن لنگر نمایش داده شده به بازدید کننده را با استفاده از این کد کوتاه wrapper تغییر دهید. در این مورد ما انتخاب کرده ایم " فیس بوک " et توییتر :

آنجا ! شما اکنون یک کد کوتاه سفارشی برای پیوندهای اشتراک در صفحات و پست های خود ایجاد کرده اید. توجه داشته باشید که تمام مراحل ذکر شده در بالا را می توان برای ایجاد انواع عناصر مختلف با استفاده از ویژگی وردپرس تغییر داد کوتاه فعال.

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

سایر منابع پیشنهادی

ما همچنین از شما دعوت می کنیم تا با منابع زیر مشورت کنید تا بیشتر در کنترل و کنترل وب سایت و وبلاگ خود باشید.

• نحوه ایجاد یک دکمه شناور با شاخص Z با Elementor
• کی و چگونه به نصب وردپرس در یک دایرکتوری فرعی
• چگونه یک پلاگین ساده وردپرس بلوک گوتنبرگ ایجاد کنیم
• چگونه فونت های سفارشی را به وب سایت وردپرس اضافه کنیم

نتیجه

در این مقاله با نحوه ایجاد کد کوتاه در وردپرس آشنا شدیم. اگر شما هر گونه نگرانی و یا پیشنهاد، لطفا با ما در جریان است نظر.

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

انگلیسی همراه، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.   

...