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

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

ابزارک چیست؟

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

در وردپرس، ابزارک‌ها (Widgets) قطعات کوچکی از محتوای وب‌سایت هستند که می‌توانند به نواحی خاصی از سایت اضافه شوند، مانند

ویژگی‌های اصلی ابزارک‌ها در وردپرس

1. سفارشی‌سازی آسان:
   • ابزارک‌ها به شما این امکان را می‌دهند که با کشیدن و رها کردن، ویژگی‌ها و محتوای مختلفی را به نواحی تعیین‌شده سایت اضافه کنید.
2. مدیریت بدون نیاز به کدنویسی:
   • استفاده از ابزارک‌ها برای اضافه کردن ویژگی‌ها و محتوای مختلف به سایت به راحتی و بدون نیاز به نوشتن کدهای HTML، CSS یا PHP انجام می‌شود.
3. تنوع:
   • ابزارک‌ها می‌توانند شامل انواع مختلفی از محتوا و عملکردها باشند، از جمله متون، تصاویر، فرم‌های تماس، فهرست‌های مطالب، جستجوها، و غیره.

انواع ابزارک‌ها در وردپرس

1. ابزارک‌های پیش‌فرض وردپرس:
   • متن (Text): افزودن متن سفارشی یا HTML.
   • فهرست‌ها (Navigation Menu): نمایش منوهای ناوبری.
   • آخرین نوشته‌ها (Recent Posts): نمایش لیستی از جدیدترین نوشته‌ها.
   • آخرین دیدگاه‌ها (Recent Comments): نمایش جدیدترین دیدگاه‌های سایت.
   • آرشیو (Archives): نمایش آرشیو نوشته‌ها بر اساس تاریخ.
   • برچسب‌ها (Tags Cloud): نمایش برچسب‌های نوشته‌ها به صورت ابری.
2. ابزارک‌های افزونه‌ها:
   • بسیاری از افزونه‌ها (Plugins) ابزارک‌های خاص خود را ارائه می‌دهند. به عنوان مثال، افزونه‌های سئو می‌توانند ابزارک‌هایی برای نمایش نقشه سایت، اطلاعات مربوط به جستجوها و غیره داشته باشند.
3. ابزارک‌های قالب (Theme):
   • قالب‌های وردپرس معمولاً ابزارک‌های اختصاصی خود را ارائه می‌دهند که به شما امکان می‌دهند ویژگی‌های خاصی را اضافه کنید. این ابزارک‌ها می‌توانند شامل ویجت‌های سفارشی برای نمایش خدمات، نمونه‌کارها، یا اطلاعات خاصی باشند.

نحوه استفاده از ابزارک‌ها در وردپرس

1. دسترسی به ابزارک‌ها:
   • وارد داشبورد وردپرس شوید.
   • به «نمایش» بروید و سپس «ابزارک‌ها» را انتخاب کنید.
2. افزودن ابزارک جدید:
   • در صفحه ابزارک‌ها، لیستی از ابزارک‌های موجود در نوار کناری (Widget Areas) نمایش داده می‌شود.
   • برای افزودن یک ابزارک جدید، آن را از لیست ابزارک‌ها کشیده و به ناحیه‌ای از سایت که می‌خواهید (مانند سایدبار یا فوتر) رها کنید.
3. تنظیمات ابزارک:
   • پس از افزودن ابزارک، بر روی آن کلیک کنید تا تنظیمات مربوط به آن نمایش داده شود.
   • تنظیمات شامل عنوان ابزارک، محتوای آن و گزینه‌های دیگر می‌شود. تغییرات را ذخیره کنید.
4. مدیریت و تغییر ابزارک‌ها:
   • می‌توانید ابزارک‌ها را دوباره جابه‌جا کرده، حذف کنید یا تنظیمات آن‌ها را ویرایش کنید.

کاربردهای رایج ابزارک‌ها

1. بهبود تجربه کاربری:
   • ابزارک‌ها به شما کمک می‌کنند که اطلاعات مهم و مفید را در نقاط استراتژیک سایت خود نمایش دهید، مانند سایدبار و فوتر.
2. افزایش تعامل با کاربران:
   • ابزارک‌هایی مانند فرم‌های تماس، فهرست‌های مطالب و ابزارک‌های جستجو می‌توانند تعامل کاربران با سایت را افزایش دهند.
3. نمایش محتوای ویژه:
   • استفاده از ابزارک‌ها برای نمایش محتوای ویژه، پیشنهادات، یا تبلیغات در بخش‌های مختلف سایت.

مزایای استفاده از ابزارک‌ها در وردپرس

1. سادگی و کاربرپسند بودن:
   • ابزارک‌ها استفاده از آن‌ها آسان است و نیاز به کدنویسی ندارد. این ویژگی به کاربران مبتدی این امکان را می‌دهد که بدون نیاز به دانش فنی بالا، سایت خود را شخصی‌سازی کنند.
2. قابلیت سفارشی‌سازی:
   • با استفاده از ابزارک‌ها، می‌توانید به راحتی نواحی مختلف سایت خود را سفارشی کنید و محتوای متنوعی را نمایش دهید.
3. انعطاف‌پذیری:
   • ابزارک‌ها به شما این امکان را می‌دهند که به سرعت و به‌سادگی محتوا و ویژگی‌های جدید را به سایت اضافه کنید و تغییرات را بدون نیاز به ویرایش کدها اعمال کنید.

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

افزودن ابزارک به قالب وردپرس

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

اگر در ارتباط با نحوه تغییر ایجاد کردن در کدها آگاهی ندارید جای هیچ نگرانی نیست، در ادامه چگونگی اضافه کردن امکان ابزارک را بر روی وردپرس به‌صورت گام‌به‌گام به شما آموزش می‌دهیم.

افزودن ابزارک به قالب وردپرس یکی از روش‌های مؤثر برای افزودن قابلیت‌ها و ویژگی‌های اضافی به سایت شما است. برای انجام این کار، باید چند مرحله ساده را دنبال کنید:

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

مرحله ۱: ثبت ناحیه ابزارک‌ها در قالب

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

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

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => 'ناحیه ابزارک سایدبار',
        'id'            => 'sidebar-1',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

با افزودن کد بالا در قسمت فانکشن قالب خود که همان فایل functions.php است، قالب شما از ابزارک پشتیبانی خواهد کرد.این کار با استفاده از تابع register_sidebar انجام می‌شود. مثال زیر نحوه ثبت یک ناحیه ابزارک را نشان می‌دهد:

توضیحاتی در ارتباط با کدهای بالا

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

• name : اسم ابزارک شما
• description : توضیحی از ابزارک شما
• before_widget : کدی که قبل از ابزارک قرار می‌گیرد
• after_widget : کدی که بعد از ابزارک  قرار می‌گیرد
• before_title : تگ‌های که قبل از متن ابزارک قرار می‌گیرد
• after_title : تگ‌های که بعد از متن ابزارک قرار می‌گیرد

با اضافه کردن کد بالا می‌توانید ابزارک را فعال کنید.
اجازه دهید این موضوع را برای شما با یک مثال واضح‌تر بیان کنم، تا بهتر متوجه شوید. به‌عنوان‌مثال اگر می‌خواهید استایل جعبه ابزارک شما newsbox باشد، بایستی کد بالا را به‌صورت زیر تغییر دهید:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'          => 'ستون کناری',
'description'   => 'ابزارک ستون کناری سایت',
'before_widget' => '<div class="newsbox">',
'after_widget'  => '</div>',
'before_title'  => '',
'after_title'   => '',
));
؟>

مرحله ۲: نمایش ناحیه ابزارک‌ها در قالب

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

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

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('ستون کناری') ) : ?><?php endif; ?>

اکنون می‌توانید با مراجعه به قسمت ابزارک وردپرس خود، ابزارک‌های مورد تأیید خود و دلخواهتان را به وردپرس اضافه کنید.

کد زیر را در قسمت فوتر ، سایدبار ، یا هرجایی از سایت که نیاز به ابزارک دارید ، کپی کنید.

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

مرحله ۳: اضافه کردن ابزارک‌ها از طریق پیشخوان وردپرس

پس از انجام مراحل بالا، می‌توانید به پیشخوان وردپرس بروید و ابزارک‌های مورد نظر خود را به ناحیه‌های ثبت شده اضافه کنید. برای این کار:

1. به قسمت نمایش » ابزارک‌ها بروید.
2. ابزارک مورد نظر خود را انتخاب کنید و آن را به ناحیه‌ای که ثبت کرده‌اید بکشید و رها کنید.

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

ساخت ویجت اختصاصی

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

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

روش اول: استفاده از WP_Widget کلاس برای ساخت ویجت سفارشی

استفاده از کلاس WP_Widget یکی از روش‌های سنتی و معتبر برای ساخت ویجت‌های سفارشی در وردپرس است. این روش همچنان مورد استفاده قرار می‌گیرد و به شما امکان می‌دهد کنترل کامل بر روی عملکرد ویجت خود داشته باشید.

مراحل ایجاد ویجت سفارشی با استفاده از کلاس WP_Widget:

ایجاد فایل پلاگین

ابتدا یک فایل PHP جدید در پوشه wp-content/plugins ایجاد کنید. این فایل را مثلاً custom-widget.php نامگذاری کنید.

سپس کد زیر را در آن قرار دهید:

phpCopy code<?php
/*
Plugin Name: Custom Widget
Description: A simple custom widget.
Version: 1.0
Author: Your Name
*/

// ساخت کلاس ویجت سفارشی
class My_Custom_Widget extends WP_Widget {
    
    // تابع سازنده
    function __construct() {
        parent::__construct(
            'my_custom_widget', // Base ID
            __('My Custom Widget', 'text_domain'), // Name
            array('description' => __('A Custom Widget', 'text_domain'),) // Args
        );
    }

    // نمایش ویجت در فرانت‌اند
    public function widget($args, $instance) {
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }
        echo __('Hello, World!', 'text_domain');
        echo $args['after_widget'];
    }

    // فرم تنظیمات ویجت در بک‌اند
    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('New title', 'text_domain');
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }

    // به‌روزرسانی تنظیمات ویجت
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

// ثبت ویجت
function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');
?>

فعال‌سازی پلاگین

به پیشخوان وردپرس بروید. از منوی سمت راست، به بخش “افزونه‌ها” بروید و “افزونه های نصب شده” را انتخاب کنید.

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

استفاده از ویجت

پس از فعال‌سازی، به بخش “نمایش” و سپس “ابزارک‌ ها” در پیشخوان وردپرس بروید.

ویجت سفارشی خود را که با نام “My Custom Widget” قابل مشاهده است، پیدا کنید و آن را به یکی از ناحیه‌های ویجت خود اضافه کنید.

تنظیمات ویجت را (مانند عنوان) از طریق فرم موجود تنظیم کنید و ذخیره کنید.

توضیحات اضافی:

• کلاس WP_Widget: این کلاس پایه‌ای برای ایجاد ویجت‌های سفارشی در وردپرس است. متدهای مهم آن شامل __construct (سازنده ویجت)، widget (نمایش ویجت در فرانت‌اند)، form (فرم تنظیمات ویجت در بک‌اند) و update (به‌روزرسانی تنظیمات ویجت) می‌باشد.
• ثبت ویجت: با استفاده از تابع register_widget، ویجت سفارشی شما در وردپرس ثبت می‌شود و آماده استفاده خواهد بود.

روش دوم: استفاده از بلوک‌های گوتنبرگ و Block API

برای ایجاد بلوک‌های سفارشی در ویرایشگر بلوک Gutenberg وردپرس و استفاده از کنترل پنل هاستینگ، مراحل زیر را دنبال کنید. این روش برای کار در هاست‌های مشترک و با استفاده از ابزارهای کنترل پنل مانند cPanel یا Plesk طراحی شده است.

آماده‌سازی فایل‌ها و دایرکتوری‌ها

ایجاد دایرکتوری افزونه

ورود به کنترل پنل هاستینگ: وارد کنترل پنل هاستینگ خود (مانند cPanel) شوید.

باز کردن File Manager: در cPanel، به File Manager بروید.

رفتن به دایرکتوری افزونه‌ها: به مسیر /wp-content/plugins/ بروید.

ایجاد دایرکتوری جدید برای افزونه: در دایرکتوری plugins، یک دایرکتوری جدید با نام دلخواه برای افزونه خود ایجاد کنید. برای مثال، my-custom-block.

ایجاد فایل‌های افزونه

ایجاد فایل PHP افزونه: در دایرکتوری افزونه جدید (مانند my-custom-block)، یک فایل PHP با نام my-custom-block.php ایجاد کنید .

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

<?php
/**
 * Plugin Name: My Custom Block
 * Description: A custom Gutenberg block for WordPress.
 * Version: 1.0.0
 * Author: Your Name
 */

// Enqueue block assets for the editor.
function my_custom_block_enqueue_assets() {
    wp_enqueue_script(
        'my-custom-block-js',
        plugins_url('/build/index.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'build/index.js')
    );
    wp_enqueue_style(
        'my-custom-block-css',
        plugins_url('/build/style.css', __FILE__),
        array(),
        filemtime(plugin_dir_path(__FILE__) . 'build/style.css')
    );
}
add_action('enqueue_block_editor_assets', 'my_custom_block_enqueue_assets');

و در نهایت از بالای صفحه سمت ر است ، تغییرات را ذخیره کنید.

ایجاد فایل‌های JavaScript و CSS: در دایرکتوری افزونه، دایرکتوری‌های src و build را ایجاد کنید. در دایرکتوری src، یک فایل JavaScript با نام index.js ایجاد کنید و کد بلوک را در آن بنویسید:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

registerBlockType('my-custom-block/hello-world', {
  title: __('Hello World', 'my-custom-block'),
  icon: 'smiley',
  category: 'widgets',
  attributes: {
    content: {
      type: 'string',
      source: 'html',
      selector: 'p',
    },
  },
  edit({ attributes, setAttributes }) {
    const { content } = attributes;
    return (
      <div className="my-custom-block">
        <RichText
          tagName="p"
          value={content}
          onChange={(value) => setAttributes({ content: value })}
          placeholder={__('Write something...', 'my-custom-block')}
        />
      </div>
    );
  },
  save({ attributes }) {
    const { content } = attributes;
    return (
      <div className="my-custom-block">
        <RichText.Content tagName="p" value={content} />
      </div>
    );
  },
});

در دایرکتوری src، اگر نیاز به فایل CSS دارید، یک فایل style.css ایجاد کنید و استایل‌های خود را در آن بنویسید:

.my-custom-block {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
}

نصب ابزارهای توسعه

برای نصب ابزارهای توسعه مانند Webpack و Babel، نیاز به دسترسی SSH دارید. اگر به SSH دسترسی ندارید، باید ابزارهای لازم را در محیط توسعه محلی خود نصب کنید و سپس فایل‌های ساخته شده را به هاست بارگذاری کنید.

استفاده از محیط توسعه محلی

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

نصب ابزارهای محلی

نصب Node.js و NPM : از سایت رسمی node.js می توانید node.js را دانلود و نصب کنید که به صورت همزمان با یکدیگر نصب می شوند.

نصب Webpack و Babel: با استفاده از ترمینال یا خط فرمان، به دایرکتوری پروژه خود بروید و ابزارهای لازم را نصب کنید.

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

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

ایجاد فایل‌های پیکربندی: فایل‌های پیکربندی webpack.config.js و .babelrc را در دایرکتوری پروژه خود ایجاد کنید، مشابه مراحل ذکر شده در بالا.

ساخت پروژه: از دستور webpack برای ساخت پروژه استفاده کنید:

npx webpack

این دستور فایل‌های JavaScript و CSS را بسته‌بندی کرده و در دایرکتوری build قرار می‌دهد.

بارگذاری فایل‌های ساخته شده به هاست

بارگذاری فایل‌ها: به کنترل پنل هاستینگ برگردید و فایل‌های index.js و style.css که در دایرکتوری build ساخته‌اید را به دایرکتوری build در هاست خود بارگذاری کنید.

فایل‌های CSS و JS را از طریق File Manager بارگذاری کنید: به دایرکتوری افزونه خود در کنترل پنل هاست بروید و فایل‌های index.js و style.css را در دایرکتوری build قرار دهید.

فعال‌سازی افزونه و آزمایش

1. فعال‌سازی افزونه:
   • وارد داشبورد وردپرس شوید.
   • به افزونه‌ها بروید و افزونه جدید خود را پیدا کنید.
   • افزونه را فعال کنید.
2. آزمایش بلوک:
   • وارد ویرایشگر بلوک Gutenberg شوید و بلوک سفارشی خود را اضافه کنید.
   • مطمئن شوید که بلوک به درستی کار می‌کند و مطابق انتظار شما است.

با این روش، می‌توانید بلوک‌های سفارشی برای ویرایشگر بلوک Gutenberg در وردپرس ایجاد کنید و از طریق کنترل پنل هاستینگ فایل‌های لازم را مدیریت کنید. اگر به ابزارهای توسعه مانند Webpack و Babel دسترسی ندارید، می‌توانید این ابزارها را به صورت محلی نصب کرده و سپس فایل‌های تولید شده را به هاست بارگذاری کنید.

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

ورود به SSH و آماده‌سازی محیط

اتصال به هاست از طریق SSH: با استفاده از یک کلاینت SSH (مثل PuTTY در ویندوز یا Terminal در macOS/Linux)، به سرور خود متصل شوید. دستور اتصال به سرور معمولاً به صورت زیر است:

ssh username@your-server-ip

رفتن به دایرکتوری افزونه‌ها: پس از ورود به سرور، به دایرکتوری افزونه‌ها بروید:

cd /path/to/your/wordpress/wp-content/plugins

معمولاً مسیر این دایرکتوری به شکل /home/username/public_html/wp-content/plugins است. توجه داشته باشید که باید مسیر صحیح را براساس ساختار هاست خود وارد کنید.

ایجاد دایرکتوری برای افزونه: یک دایرکتوری جدید برای افزونه خود ایجاد کنید:

mkdir my-custom-block
cd my-custom-block

نصب ابزارهای توسعه

نصب Node.js و NPM: بررسی کنید که آیا Node.js و NPM در سرور شما نصب شده‌اند:

node -v
npm -v

اگر نصب نشده‌اند، می‌توانید آنها را نصب کنید. برای نصب Node.js و NPM به روش‌های مناسب برای توزیع لینوکس خود مراجعه کنید.

ایجاد فایل package.json: با استفاده از دستور زیر، فایل package.json را ایجاد کنید:

npm init -y

این دستور فایل package.json را با تنظیمات پیش‌فرض ایجاد می‌کند.

نصب وابستگی‌های لازم: بسته‌های مورد نیاز برای توسعه بلوک‌های Gutenberg را نصب کنید:

npm install --save @wordpress/block-editor @wordpress/components @wordpress/element @wordpress/i18n @wordpress/scripts

ایجاد فایل‌های پیکربندی: فایل webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    library: 'MyCustomBlock',
    libraryTarget: 'var',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js'],
  },
  mode: 'production',
};

فایل .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

ایجاد بلوک سفارشی

ایجاد فایل JavaScript برای بلوک: در دایرکتوری src، یک فایل index.js ایجاد کنید و کد بلوک را در آن بنویسید:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

registerBlockType('my-custom-block/hello-world', {
  title: __('Hello World', 'my-custom-block'),
  icon: 'smiley',
  category: 'widgets',
  attributes: {
    content: {
      type: 'string',
      source: 'html',
      selector: 'p',
    },
  },
  edit({ attributes, setAttributes }) {
    const { content } = attributes;
    return (
      <div className="my-custom-block">
        <RichText
          tagName="p"
          value={content}
          onChange={(value) => setAttributes({ content: value })}
          placeholder={__('Write something...', 'my-custom-block')}
        />
      </div>
    );
  },
  save({ attributes }) {
    const { content } = attributes;
    return (
      <div className="my-custom-block">
        <RichText.Content tagName="p" value={content} />
      </div>
    );
  },
});

ایجاد فایل CSS (اختیاری): اگر نیاز به استایل دارید، یک فایل style.css در دایرکتوری src ایجاد کنید و استایل‌های خود را بنویسید.

ساخت پروژه: از دستور webpack برای ساخت پروژه استفاده کنید:

npx webpack

ثبت بلوک در وردپرس

نوشتن کد PHP برای بارگذاری بلوک: در دایرکتوری افزونه، فایل PHP (مانند my-custom-block.php) را ایجاد کنید و کد زیر را در آن وارد کنید:

<?php
/**
 * Plugin Name: My Custom Block
 * Description: A custom Gutenberg block for WordPress.
 * Version: 1.0.0
 * Author: Your Name
 */

function my_custom_block_enqueue_assets() {
    wp_enqueue_script(
        'my-custom-block-js',
        plugins_url('/build/index.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'build/index.js')
    );
    wp_enqueue_style(
        'my-custom-block-css',
        plugins_url('/build/style.css', __FILE__),
        array(),
        filemtime(plugin_dir_path(__FILE__) . 'build/style.css')
    );
}
add_action('enqueue_block_editor_assets', 'my_custom_block_enqueue_assets');

فعال‌سازی افزونه: به داشبورد وردپرس بروید. به افزونه‌ها بروید و افزونه جدید خود را پیدا کنید. افزونه را فعال کنید.

آزمایش و بهینه‌سازی

1. آزمایش بلوک:
   • وارد ویرایشگر بلوک Gutenberg شوید.
   • بلوک سفارشی خود را اضافه کنید و مطمئن شوید که به درستی کار می‌کند.
2. بهینه‌سازی:
   • کد و استایل‌های خود را بررسی کنید و اصلاحات لازم را انجام دهید.

با دسترسی SSH، می‌توانید تمام مراحل ایجاد و توسعه بلوک‌های سفارشی Gutenberg را مستقیماً بر روی سرور خود انجام دهید. این روش به شما امکان می‌دهد تا به سرعت تغییرات را اعمال کرده و بلوک‌های خود را تست کنید. اگر سوالات بیشتری دارید یا به مشکلی برخوردید، لطفاً بپرسید!

روش سوم: استفاده از Advanced Custom Fields (ACF) و ACF Blocks

استفاده از Advanced Custom Fields (ACF) و قابلیت ACF Blocks یک روش ساده و کاربرپسند برای ساخت بلوک‌های سفارشی بدون نیاز به دانش عمیق جاوا اسکریپت است.

نصب ACF Pro: به سایت Advanced Custom Fields بروید و نسخه Pro را خریداری و نصب کنید. چنانچه با نصب افزونه آشنایی ندارید می توانید مقاله آموزش نصب افزونه در وردپرس را مطالعه کنید.

ایجاد بلوک با ACF: از پیشخوان وردپرس به Custom Fields > بلوک‌ها بروید و یک بلوک جدید ایجاد کنید. فیلدهای مورد نظر خود را اضافه کنید.

پیکربندی بلوک: در فایل functions.php قالب خود، کد زیر را برای ثبت بلوک اضافه کنید:

function my_acf_init_block_types() {
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'my-custom-block',
            'title'             => __('My Custom Block'),
            'description'       => __('A custom block.'),
            'render_template'   => 'template-parts/blocks/my-custom-block.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array('custom', 'block'),
        ));
    }
}
add_action('acf/init', 'my_acf_init_block_types');

استفاده از افزونه های رایگان

چندین افزونه رایگان وجود دارند که می‌توانند به شما در ایجاد فیلدهای سفارشی و بلوک‌های Gutenberg کمک کنند، هرچند ممکن است به اندازه Advanced Custom Fields (ACF) Pro کامل و پیشرفته نباشند. در اینجا چند افزونه رایگان مشابه و با قابلیت‌های مشابه به ACF Pro معرفی می‌کنم:

۱. Pods – Custom Content Types and Fields

Pods یک افزونه رایگان و قدرتمند است که برای ایجاد انواع پست‌های سفارشی، زمینه‌های سفارشی و taxonomies طراحی شده است. با استفاده از Pods می‌توانید محتواهای پیچیده و سفارشی را به راحتی مدیریت کنید.

• ویژگی‌ها:
  • ایجاد و مدیریت انواع پست‌های سفارشی.
  • ایجاد زمینه‌های سفارشی و taxonomies.
  • رابط کاربری ساده برای مدیریت محتوا.

۲. Meta Box

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

• ویژگی‌ها:
  • پشتیبانی از انواع مختلف فیلدها (متنی، انتخابی، تصویری و غیره).
  • پشتیبانی از متا باکس‌ها و زمینه‌های سفارشی برای انواع پست‌ها.
  • رابط کاربری ساده و قدرتمند.

۳. Carbon Fields

Carbon Fields یک افزونه رایگان و قدرتمند برای ایجاد فیلدهای سفارشی، متا باکس‌ها و گزینه‌های صفحات است. این افزونه برای توسعه‌دهندگان طراحی شده و قابلیت‌های بسیاری را ارائه می‌دهد.

• ویژگی‌ها:
  • ایجاد زمینه‌های سفارشی برای انواع پست‌ها و صفحات.
  • پشتیبانی از انواع مختلف فیلدها.
  • پشتیبانی از بلوک‌های Gutenberg (در نسخه‌های جدیدتر).

۴. CMB2

CMB2 یک افزونه رایگان دیگر برای ایجاد متا باکس‌ها و زمینه‌های سفارشی است که به توسعه‌دهندگان اجازه می‌دهد تا فیلدهای سفارشی پیچیده را در وردپرس ایجاد کنند.

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

۵. Custom Field Suite (CFS)

Custom Field Suite یکی دیگر از افزونه‌های رایگان برای مدیریت زمینه‌های سفارشی است که با استفاده از آن می‌توانید فیلدهای متنوعی را به پست‌ها و صفحات اضافه کنید.

• ویژگی‌ها:
  • ایجاد و مدیریت زمینه‌های سفارشی.
  • پشتیبانی از انواع مختلف فیلدها.
  • رابط کاربری ساده و کاربرپسند.

توجه

• نسخه‌های رایگان: افزونه‌های رایگان معمولاً محدودیت‌هایی دارند و ممکن است همه ویژگی‌های پیشرفته‌ای که در نسخه‌های پرو وجود دارند را ارائه ندهند.
• سازگاری با Gutenberg: اگر به دنبال ساخت بلوک‌های سفارشی برای Gutenberg هستید، ممکن است افزونه‌های رایگان پشتیبانی محدودتری نسبت به ACF Pro داشته باشند. در این صورت، ممکن است نیاز به توسعه‌دهنده داشته باشید که کدهای خاصی را برای ایجاد بلوک‌های سفارشی بنویسد.

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

آنچه آموخته ایم

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

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

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

تیم تولید محتوا

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