اکنون روند ساخت پلاگین فیلتر کردن کلمات وردپرس به نام “Wpstorm Word Filter Plugin” را به شما آموزش خواهم داد. در آموزش ساخت افزونه فیلتر کردن کلمات در سایت وردپرس، افزونه ساخته شده به شما امکان می دهد لیستی از کلمات را در محتوای سایت وردپرس خود با کلمه یا علامتی جایگزین کنید. (افزونه به درد این می خوره که می خواهید یک سری از کلمات اصلاً توی سایتتون نشون داده نشه، مثلاً اسامی رقبائتان یا کلمات زشت و … )

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

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

مرحله 1: فایل پلاگین را ایجاد کنید

برای ساخت پلاگین فیلتر کردن کلمات، یک فایل جدید با نام «wpstorm-word-filter-plugin.php» ایجاد کنید و کد زیر را در ابتدا قرار دهید:

<?php
/*
Plugin Name: Wpstorm Word Filter Plugin
Description: Replaces a list of words.
Version: 1.0
Author: Wpstorm DEV team
Author URI: https://wpstorm.ir/
*/
PHP

این کد اطلاعات اولیه پلاگین شما مانند نام، توضیحات، نسخه، نویسنده و آدرس سایت نویسنده را تنظیم می کند.

مرحله 2: کلاس پلاگین را تعریف کنید

در زیر کد قبلی، کد زیر را برای تعریف کلاس اصلی افزونه اضافه کنید:

if (!defined('ABSPATH')) {
  exit; // Exit if accessed directly
}

class WpstormWordFilterPlugin {
  function __construct() {
    // Constructor
  }

  // Add other functions here
}

$ourWordFilterPlugin = new WpstormWordFilterPlugin();
PHP

این کد کلاس افزونه اصلی، «WpstormWordFilterPlugin» را تعریف می کند و نمونه ای از آن را مقداردهی اولیه می کند.

مرحله 3: قلاب ها و اقدامات مورد نیاز را اضافه کنید

داخل تابع «__construct()» کلاس «WpstormWordFilterPlugin»، کد زیر را اضافه کنید:

add_action('admin_menu', array($this, 'ourMenu'));
add_action('admin_init', array($this, 'ourSettings'));
if (get_option('plugin_words_to_filter')) {
  add_filter('the_content', array($this, 'filterLogic'));
}
PHP

این خطوط کد به اقدامات و فیلترهای وردپرس متصل می شوند. تابع «ourMenu» یک صفحه منو برای افزونه اضافه می کند، عملکرد «ourSettings» تنظیمات افزونه را کنترل می کند، و تابع «filterLogic» جایگزین کلمات فیلتر شده در محتوا را مشخص می نماید.

مرحله 4: تنظیمات پلاگین را تعریف کنید

توابع زیر را به کلاس «WpstormWordFilterPlugin» اضافه کنید:

function ourSettings() {
  add_settings_section('replacement-text-section', null, null, 'word-filter-options');
  register_setting('replacementFields', 'replacementText');
  add_settings_field('replacement-text', 'Filtered Text', array($this, 'replacementFieldHTML'), 'word-filter-options', 'replacement-text-section');
}

function replacementFieldHTML() {
  ?>
  <input type="text" name="replacementText" value="<?php echo esc_attr(get_option('replacementText', '***')) ?>">
  <p class="description">Leave blank to simply remove the filtered words.</p>
  <?php
}
PHP

این توابع تنظیمات افزونه را تعریف می کنند و یک فیلد ورودی برای متن جایگزین نمایش می دهند. تابع ‘ourSettings’ یک بخش تنظیمات ایجاد می کند، تنظیمات را ثبت می کند و فیلد را اضافه می کند. تابع “replacementFieldHTML” کد مورد نیاز HTML را برای فیلد ورودی ارائه می کند.

مرحله 5: منطق فیلترینگ را پیاده سازی کنید

تابع زیر را به کلاس «WpstormWordFilterPlugin» اضافه کنید:

function filterLogic($content) {
  $badWords = explode(',', get_option('plugin_words_to_filter'));
  $badWordsTrimmed = array_map('trim', $badWords);
  return str_ireplace($badWordsTrimmed, esc_html(get_option('replacementText', '****')), $content);
}
PHP

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

مرحله 6: صفحات منوی پلاگین ایجاد کنید

تابع زیر را به کلاس «WpstormWordFilterPlugin» اضافه کنید:

function ourMenu() {
  $mainPageHook = add_menu_page(
    'Words To Filter', // Page title
    'Word Filter', // Menu title
    'manage_options', // Capability required to access
    'ourwordfilter', // Menu slug
    array($this, 'wordFilterPage'), // Callback function to render the page
    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAyMEMxNS41MjI5IDIwIDIwIDE1LjUyMjkgMjAgMTBDMjAgNC40NzcxNCAxNS41MjI5IDAgMTAgMEM0LjQ3NzE0IDAgMCA0LjQ3NzE0IDAgMTBDMCAxNS41MjI5IDQuNDc3MTQgMjAgMTAgMjBaTTExLjk5IDcuNDQ2NjZMMTAuMDc4MSAxLjU2MjVMOC4xNjYyNiA3LjQ0NjY2SDEuOTc5MjhMNi45ODQ2NSAxMS4wODMzTDUuMDcyNzUgMTYuOTY3NEwxMC4wNzgxIDEzLjMzMDhMMTUuMDgzNSAxNi45Njc0TDEzLjE3MTYgMTEuMDgzM0wxOC4xNzcgNy40NDY2NkgxMS45OVoiIGZpbGw9IiNGRkRGOEQiLz4KPC9zdmc+', // Menu icon
    100 // Menu position
  );

  add_submenu_page(
    'ourwordfilter', // Parent menu slug
    'Words To Filter', // Page title
    'Words List', // Submenu title
    'manage_options', // Capability required to access
    'ourwordfilter', // Submenu slug
    array($this, 'wordFilterPage') // Callback function to render the page
  );

  add_submenu_page(
    'ourwordfilter', // Parent menu slug
    'Word Filter Options', // Page title
    'Options', // Submenu title
    'manage_options', // Capability required to access
    'word-filter-options', // Submenu slug
    array($this, 'optionsSubPage') // Callback function to render the page
  );

  add_action("load-{$mainPageHook}", array($this, 'mainPageAssets'));
}

function mainPageAssets() {
  wp_enqueue_style('filterAdminCss', plugin_dir_url(__FILE__) . 'styles.css');
}
PHP

این تابع لینک صفحه منوی اصلی و صفحات زیر منو افزونه را ایجاد می کند و توابع مناسب و مرتبط را برای رندر کردن صفحه تنظیمات افزونه ثبت می کند. تابع ‘mainPageAssets’ فایل ‘styles.css’ را در صف برای لود شدن در زمان مناسب قرار می دهد که بعدا توضیح داده خواهد شد.

مرحله 7: پروسه ذخیره فرم تنظیمات افزونه

تابع زیر را به کلاس «WpstormWordFilterPlugin» اضافه کنید:

function handleForm() {
  if (wp_verify_nonce($_POST['ourNonce'], 'saveFilterWords') && current_user_can('manage_options')) {
    update_option('plugin_words_to_filter', sanitize_text_field($_POST['plugin_words_to_filter']));
    ?>
    <div class="updated">
      <p>Your filtered words were saved.</p>
    </div>
    <?php
  } else {
    ?>
    <div class="error">
      <p>Sorry, you do not have permission to perform that action.</p>
    </div>
    <?php
  }
}
PHP

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

مرحله 8: صفحه Word Filter را رندر کنید

تابع زیر را به کلاس «WpstormWordFilterPlugin» اضافه کنید:

function wordFilterPage() {
  ?>
  <div class="wrap">
    <h1>Word Filter</h1>
    <?php if ($_POST['justsubmitted'] == "true") $this->handleForm() ?>
    <form method="POST">
      <input type="hidden" name="justsubmitted" value="true">
      <?php wp_nonce_field('saveFilterWords', 'ourNonce') ?>
      <label for="plugin_words_to_filter">
        <p>Enter a <strong>comma-separated</strong> list of words to filter from your site's content.</p>
      </label>
      <div class="word-filter__flex-container">
        <textarea name="plugin_words_to_filter" id="plugin_words_to_filter" placeholder="bad, mean, awful, horrible"><?php echo esc_textarea(get_option('plugin_words_to_filter')) ?></textarea>
      </div>
      <input type="submit" name="submit" id="submit" class="button button-primary" value="Save Changes">
    </form>
  </div>
  <?php
}
PHP

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

مرحله 9: صفحه فرعی گزینه ها را رندر کنید

تابع زیر را به کلاس «WpstormWordFilterPlugin» اضافه کنید:

function optionsSubPage() {
  ?>
  <div class="wrap">
    <h1>Word Filter Options</h1>
    <form action="options.php" method="POST">
      <?php
        settings_errors();
        settings_fields('replacementFields');
        do_settings_sections('word-filter-options');
        submit_button();
      ?>
    </form>
  </div>
  <?php
}
PHP

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

مرحله 10: Stylesheet را ایجاد کنید

یک فایل جدید با نام «styles.css» ایجاد کنید و کد CSS زیر را به آن اضافه کنید:

.word-filter__flex-container {
  display: flex;
}

.word-filter__flex-container textarea {
  flex: 1;
  height: 200px;
  margin-bottom: 20px;
}
CSS

این کد CSS یک فایل استایل ساده برای صفحه تنظیمات افزونه تعریف می کند.

مرحله 11: Stylesheet را در صف قرار دهید

در نهایت، به تابع “mainPageAssets” (در مرحله 6 گذشت) در کلاس “WpstormWordFilterPlugin” برگردید و مطمئن شوید که خط زیر اضافه شده است:

wp_enqueue_style('filterAdminCss', plugin_dir_url(__FILE__) . 'styles.css');
PHP

این خط فایل ‘styles.css’ را در صف قرار می دهد تا در زمان مناسب در صفحه تنظیمات افزونه بارگذاری شود.

کد کامل index.php افزونه:

<?php

/*
  Plugin Name: Our Word Filter Plugin
  Description: Replaces a list of words.
  Version 1.0
  Author: Brad
  Author URI: https://www.udemy.com/user/bradschiff/
*/

if( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class OurWordFilterPlugin {
  function __construct() {
    add_action('admin_menu', array($this, 'ourMenu'));
    add_action('admin_init', array($this, 'ourSettings'));
    if (get_option('plugin_words_to_filter')) add_filter('the_content', array($this, 'filterLogic'));
  }

  function ourSettings() {
    add_settings_section('replacement-text-section', null, null, 'word-filter-options');
    register_setting('replacementFields', 'replacementText');
    add_settings_field('replacement-text', 'Filtered Text', array($this, 'replacementFieldHTML'), 'word-filter-options', 'replacement-text-section');
  }

  function replacementFieldHTML() { ?>
    <input type="text" name="replacementText" value="<?php echo esc_attr(get_option('replacementText', '***')) ?>">
    <p class="description">Leave blank to simply remove the filtered words.</p>
  <?php }

  function filterLogic($content) {
    $badWords = explode(',', get_option('plugin_words_to_filter'));
    $badWordsTrimmed = array_map('trim', $badWords);
    return str_ireplace($badWordsTrimmed, esc_html(get_option('replacementText', '****')), $content);
  }

  function ourMenu() {
    $mainPageHook = add_menu_page('Words To Filter', 'Word Filter', 'manage_options', 'ourwordfilter', array($this, 'wordFilterPage'), 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAyMEMxNS41MjI5IDIwIDIwIDE1LjUyMjkgMjAgMTBDMjAgNC40NzcxNCAxNS41MjI5IDAgMTAgMEM0LjQ3NzE0IDAgMCA0LjQ3NzE0IDAgMTBDMCAxNS41MjI5IDQuNDc3MTQgMjAgMTAgMjBaTTExLjk5IDcuNDQ2NjZMMTAuMDc4MSAxLjU2MjVMOC4xNjYyNiA3LjQ0NjY2SDEuOTc5MjhMNi45ODQ2NSAxMS4wODMzTDUuMDcyNzUgMTYuOTY3NEwxMC4wNzgxIDEzLjMzMDhMMTUuMDgzNSAxNi45Njc0TDEzLjE3MTYgMTEuMDgzM0wxOC4xNzcgNy40NDY2NkgxMS45OVoiIGZpbGw9IiNGRkRGOEQiLz4KPC9zdmc+', 100);
    add_submenu_page('ourwordfilter', 'Words To Filter', 'Words List', 'manage_options', 'ourwordfilter', array($this, 'wordFilterPage'));
    add_submenu_page('ourwordfilter', 'Word Filter Options', 'Options', 'manage_options', 'word-filter-options', array($this, 'optionsSubPage'));
    add_action("load-{$mainPageHook}", array($this, 'mainPageAssets'));
  }

  function mainPageAssets() {
    wp_enqueue_style('filterAdminCss', plugin_dir_url(__FILE__) . 'styles.css');
  }

  function handleForm() {
    if (wp_verify_nonce($_POST['ourNonce'], 'saveFilterWords') AND current_user_can('manage_options')) {
      update_option('plugin_words_to_filter', sanitize_text_field($_POST['plugin_words_to_filter'])); ?>
      <div class="updated">
        <p>Your filtered words were saved.</p>
      </div>
    <?php } else { ?>
      <div class="error">
        <p>Sorry, you do not have permission to perform that action.</p>
      </div>
    <?php } 
  }

  function wordFilterPage() { ?>
    <div class="wrap">
      <h1>Word Filter</h1>
      <?php if ($_POST['justsubmitted'] == "true") $this->handleForm() ?>
      <form method="POST">
        <input type="hidden" name="justsubmitted" value="true">
        <?php wp_nonce_field('saveFilterWords', 'ourNonce') ?>
        <label for="plugin_words_to_filter"><p>Enter a <strong>comma-separated</strong> list of words to filter from your site's content.</p></label>
        <div class="word-filter__flex-container">
          <textarea name="plugin_words_to_filter" id="plugin_words_to_filter" placeholder="bad, mean, awful, horrible"><?php echo esc_textarea(get_option('plugin_words_to_filter')) ?></textarea>
        </div>
        <input type="submit" name="submit" id="submit" class="button button-primary" value="Save Changes">
      </form>
    </div>
  <?php }

  function optionsSubPage() { ?>
    <div class="wrap">
      <h1>Word Filter Options</h1>
      <form action="options.php" method="POST">
        <?php
          settings_errors();
          settings_fields('replacementFields');
          do_settings_sections('word-filter-options');
          submit_button();
        ?>
      </form>
    </div>
  <?php }

}

$ourWordFilterPlugin = new OurWordFilterPlugin();
PHP

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

خودشه! شما اکنون یک پلاگین وردپرس به نام “افزونه فیلتر کلمه طوفان وردپرس” را ایجاد کرده اید که به شما امکان می دهد لیستی از کلمات را در محتوای سایت وردپرس خود جایگزین کنید. به یاد داشته باشید که یک پوشه برای پلاگین خود ایجاد کنید و فایل «wpstorm-word-filter-plugin.php» و «styles.css» را درون آن قرار دهید. سپس، می توانید دایرکتوری را فشرده کرده و افزونه را از طریق داشبورد مدیریت وردپرس نصب کنید.
اگر این کار را بلد نیستید، به مقاله دیگر ما در مورد آموزش ساخت پلاگین وردپرس مراجعه کنید.

تیم طوفان وردپرس

نوشته‌های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *