WordPress 플러그인 구축을 위한 궁극적인 가이드

게시 됨: 2022-03-11

플러그인은 특정 기능이 필요한 WordPress 웹사이트의 중요한 부분입니다.

공식 WordPress 저장소에는 선택할 수 있는 45,000개 이상의 플러그인이 있지만 이러한 플러그인 중 상당수는 표시를 놓치고 있습니다.

플러그인이 저장소에 있다고 해서 플러그인이 성능을 방해하거나 보안을 손상시키지 않는다는 의미는 아닙니다.

그래서 당신은 무엇을 할 수 있습니까? 글쎄, 당신은 자신을 만들 수 있습니다.

WordPress 플러그인 구축을 위한 궁극적인 가이드

훌륭한 WordPress 플러그인 구축은 신중한 계획으로 시작됩니다.

처음부터 구축하든 상용구를 기반으로 구축하든 잘 문서화된 모범 사례를 따르는 것이 절대적으로 중요합니다.

이 튜토리얼에서는 간단한 WordPress 플러그인을 올바른 방법으로 빌드하는 방법을 배우게 됩니다.

함께 읽으면서 최종 소스 코드를 검토하려면 여기에서 찾을 수 있습니다.

계획으로 시작하십시오.

먼저 플러그인이 가질 기능을 나열하고 수행해야 하는 작업을 정확히 설명하겠습니다.

우리가 만들고 있는 플러그인을 사용하면 사이트 방문자가 나중에 읽을 수 있도록 콘텐츠를 저장할 수 있습니다.

등록된 사용자의 경우 데이터베이스에 목록을 저장하고 익명 사용자의 경우 쿠키를 사용하여 목록을 저장합니다.

다음은 플러그인이 제공할 기능에 대한 개요입니다.

설정 화면

  • 관리자가 콘텐츠 끝에 "항목 저장" 버튼을 추가할 수 있는 기능.
  • 이 버튼을 추가할 게시물 유형을 선택하는 기능.
  • 사용자에게 사전 정의된 스타일을 사용할지 여부를 결정할 수 있는 옵션을 제공합니다.
  • 로그인한 사용자에게만 기능을 활성화하는 옵션을 제공합니다.
  • 플러그인의 방문자 대면 부분에 표시되는 메시지를 변경하는 옵션을 제공합니다.

콘텐츠 저장

  • 사용자가 로그인한 경우 사용자 정의 사용자 필드에 콘텐츠 저장
  • 사용자가 로그인하지 않은 경우 쿠키에 콘텐츠 저장

메시지

아래 메시지는 방문자의 플러그인 상호 작용에 대한 응답으로 화면에 표시되거나 실행 가능한 항목의 레이블로 표시됩니다.

  • "아이템 저장."
  • "항목 저장을 취소합니다."
  • “구했다. 저장된 항목을 참조하십시오.”
  • "저장된 항목이 없습니다."

저장된 화면

방문자가 저장한 게시물 목록을 볼 수 있는 곳입니다.

  • 저장된 항목 목록 표시
  • 플러그인 활성화 시 저장된 페이지 생성
  • 플러그인 비활성화 시 저장된 페이지 삭제

짧은 코드

단축 코드를 사용하면 저장된 페이지가 추가될 때마다 렌더링될 수 있습니다.

상용구를 사용하십시오.

이것은 내가 찾은 최고의 상용구입니다. 잘 구조화되고 객체 지향적이고 효율적입니다. 모든 모범 사례를 따릅니다. 그리고 빠르고 가볍습니다.

이 페이지를 사용하여 이 WordPress 플러그인 상용구를 기반으로 플러그인 코드베이스를 생성할 수 있습니다.

워드프레스 상용구

.zip 파일을 받아야 합니다.

압축을 풀고 WordPress 설치 폴더( wp-content/plugins/ )에 넣습니다.

WordPress 대시보드를 열고 플러그인으로 이동하면 플러그인이 나열되어 있는 것을 볼 수 있습니다. 아직 활성화하지 마십시오.

활성화 및 비활성화를 처리합니다.

플러그인이 활성화 및 비활성화를 적절하게 처리하는 것이 중요합니다.

플러그인이 활성화되면 "저장됨"이라는 페이지가 생성되며 여기에는 사용자가 저장한 항목이 들어 있습니다.

해당 페이지를 만드는 동안 저장된 항목의 단축 코드를 해당 페이지의 콘텐츠에 추가합니다.

마지막으로 페이지를 저장합니다. ID를 가져옵니다. 나중에 플러그인 비활성화 시 액세스할 수 있도록 데이터베이스에 저장합니다.

플러그인이 비활성화되면 데이터베이스에서 "저장된" 페이지 ID를 가져온 다음 "저장된" 페이지를 삭제하여 플러그인 자체의 흔적을 제거합니다.

Include/class-toptal-save-activator.php 및 included/class-toptal-save-deactivator.php 에서 이 모든 작업을 수행할 수 있습니다.

활성화 프로세스부터 시작하겠습니다.

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

activate() 함수는 플러그인이 활성화될 때 호출됩니다.

wp_insert_post() 함수를 사용하여 새 페이지를 만들고 add_option() 을 사용하여 페이지 ID를 데이터베이스에 저장합니다.

이제 플러그인 비활성화를 진행해 보겠습니다.

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

플러그인 비활성화 시 호출되는 deactivate() 함수는 get_option() 함수를 사용하여 페이지를 검색하고 wp_delete_post()를 사용하여 데이터베이스에서 해당 페이지를 제거하고 wp_delete_post() delete_option() 사용하여 옵션 테이블에서 저장된 ID를 제거합니다. .

플러그인을 활성화하고 페이지로 이동하면 단축 코드가 포함된 "저장됨"이라는 페이지가 표시되어야 합니다.

워드프레스 모듈 활성화

플러그인을 비활성화하면 해당 페이지가 제거됩니다.

wp_delete_post() 메서드에서 true 를 인수로 사용했기 때문에 이 페이지는 휴지통에 들어가지 않고 완전히 삭제됩니다.

플러그인 설정 페이지를 만듭니다.

admin/class-toptal-save-admin.php 파일 안에 설정 페이지를 생성할 수 있으며, 그 파일에서 가장 먼저 해야 할 일은 enqueue_styles() wp_enqueue_style() 호출을 제거하거나 주석 처리하는 것입니다. 관리 화면에 CSS/JS를 추가하지 않을 경우 enqueue_scripts() 함수 내에서 wp_enqueue_script( wp_enqueue_script() 를 호출합니다.

그러나 일부 스타일을 추가하려는 경우 모든 WordPress 관리 페이지가 아니라 플러그인의 설정 페이지에서만 해당 파일을 로드하는 것이 좋습니다. 주석 처리한 줄 바로 위에 다음 코드를 배치하여 이를 수행할 수 있습니다.

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );
 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

내가 그 'tools_page_toptal-save' 부분을 어디서 얻었는지 궁금하시다면.

글쎄, 여기 문제가 있습니다. 나는 슬러그 toptal-save를 사용하여 설정 페이지를 만들 것이고 또한 도구( tools.php ) 화면에 추가할 것이라는 것도 알고 있습니다. 따라서 이 두 가지를 합치면 $hook 변수의 값이 두 값의 연결인 'tools_page_toptal-save' 가 될 것임을 알 수 있습니다.

플러그인 설정 페이지에 있지 않은 경우 return 을 사용하여 현재 있는 기능의 실행을 즉시 종료합니다.

내 관리 화면에 사용자 지정 스타일을 추가하지 않을 것이므로 플러그인 화면이 기본 WordPress 화면처럼 보이기를 원하므로 해당 코드를 추가하지 않습니다.

이제 설정 페이지 생성을 진행할 수 있습니다.

add_submenu_page() 함수를 호출하는 간단한 메서드를 Toptal_Save_Admin 클래스에 추가하여 시작하겠습니다.

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

이것은 우리가 add_submenu_page() 함수에 전달하는 아주 소수의 인수입니다. 각각의 의미는 다음과 같습니다.

  • 상위 슬러그: 상위 메뉴의 슬러그 이름(또는 표준 WordPress 관리 페이지의 파일 이름). 여기에서 상위 슬러그의 전체 목록을 볼 수 있습니다.

  • 페이지 제목: 메뉴 선택 시 페이지의 제목 태그에 표시될 텍스트입니다.

  • 메뉴 제목: 메뉴 제목 에 사용할 텍스트입니다.

  • 기능: 이 메뉴가 사용자에게 표시되기 위해 사용자가 요구하는 기능. 관리 패널 옵션에 액세스할 수 있는 "manage_options"를 사용했습니다. 여기에서 역할 및 기능에 대해 자세히 알아볼 수 있습니다.

  • 메뉴 슬러그: 이 메뉴를 나타내는 슬러그 이름입니다.

  • 호출 가능한 함수: 이 페이지의 내용을 출력하기 위해 호출되는 함수입니다. 호출 가능한 함수의 이름을 정의했으므로 이를 생성해야 하지만 그 전에 $this 를 사용하여 자체 내에서 클래스의 인스턴스를 참조했습니다. 다음은 PHP 문서에 대한 설명입니다.

의사 변수 $this는 개체 컨텍스트 내에서 메서드가 호출될 때 사용할 수 있습니다. $this는 호출 객체에 대한 참조입니다(보통 메서드가 속한 객체이지만 메서드가 보조 객체의 컨텍스트에서 정적으로 호출되는 경우 다른 객체일 수도 있음).

다음으로 클래스에 다른 메서드를 추가합니다.

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

이 호출 가능한 함수에는 설정 페이지를 표시할 템플릿이 포함되어 있습니다. admin/partials 에 있는 toptal-save-admin-display.php 라는 파일을 참조하고 있음을 알 수 있습니다.

이제 도구로 이동하면 해당 화면이 표시되지 않습니다. 왜요? register_admin_page() 메서드를 admin_menu 후크에 연결하지 않았기 때문입니다.

include/class-toptal-save.php 파일을 define_admin_hooks() $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); 부분입니다.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

add_action() 에 대한 호출은 나중에 다룰 것이기 때문에 걱정하지 마십시오.

지금은 도구 페이지를 열면 Toptal Save 페이지를 볼 수 있습니다. 열면 작동하지만 아무 것도 없기 때문에 빈 화면이 표시됩니다.

워드프레스 도구 페이지

우리는 약간의 진행을 하고 있지만 여기에 몇 가지 설정을 표시해야 하므로 그렇게 합시다.

우리는 필드 생성을 시작할 것이며 WordPress Settings API의 도움으로 할 일입니다.

익숙하지 않은 경우 데이터를 저장하는 데 사용할 수 있는 양식 필드를 만들 수 있습니다.

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

register_settings() 함수 내에서 모든 필드를 추가하고 구성할 수 있습니다. 여기에서 함수의 전체 구현을 찾을 수 있습니다. 위에 표시된 함수에서 다음을 사용했습니다.

  • register_setting() : 설정 및 삭제 콜백을 등록합니다.
  • add_settings_section() : 설정 페이지에 새 섹션을 추가합니다.
  • add_settings_field() : 설정 페이지의 섹션에 새 필드를 추가합니다.

이 세 가지 기능 중 하나를 사용할 때마다 살균 콜백이 제공되었습니다. 이를 통해 데이터를 삭제하고 필드인 경우 적절한 HTML 요소(체크박스, 라디오, 입력 등)를 표시할 수 있습니다.

또한 필요에 따라 label_for, description 또는 default와 같은 데이터 배열을 해당 콜백에 전달했습니다.

이제 이러한 살균 콜백을 생성할 수 있습니다. 이러한 콜백에 대한 코드는 여기에서 찾을 수 있습니다.

이 모든 것은 괜찮지만 필드를 admin_init 후크에 연결한 다음 표시해야 합니다.

우리는 WordPress 코어가 실행 중 특정 지점에서 시작하거나 특정 이벤트가 발생할 때 후크인 add_action 을 사용할 것입니다. admin_init 는 사용자가 관리 영역에 액세스할 때 다른 후크보다 먼저 트리거됩니다.

먼저 Include/class-toptal-save.php 파일에 작업을 추가해야 합니다.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

다음으로 admin/partials/topal-save-admin-display.php 에서 플러그인의 관리 영역에 대한 보기를 제공해야 합니다.

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

settings_fields() 함수는 설정 페이지의 nonce, action 및 option_page 필드를 출력하는 데 사용됩니다.

그 다음에는 특정 설정 페이지에 추가된 모든 설정 섹션을 출력하는 do_settings_sections() 가 옵니다.

마지막으로 submit_button() 함수를 사용하여 제공된 텍스트와 적절한 클래스를 사용하여 제출 버튼을 추가합니다.

이제 페이지를 살펴보면 다음과 같습니다.

Wordpress 페이지 완성 예제

이것이 우리가 관리 영역에서 해야 할 전부입니다. 플러그인의 공개 부분 작업을 시작하겠습니다.

플러그인 기능을 만듭니다.

여기에 흥미로운 부분이 있습니다. 기능을 분리하려면 여러 기능을 만들어야 합니다.

  • "항목 저장" 버튼을 표시하는 기능입니다. 이것은 현재 사용자가 해당 항목을 이미 저장했는지 여부를 확인해야 하며, 이에 따라 색상과 함께 다른 텍스트를 표시합니다.
  • 항목을 저장/저장 취소하는 기능(AJAX).
  • 저장된 모든 항목을 표시하는 기능입니다.
  • 단축 코드를 생성하는 함수입니다.

이제 버튼을 표시하는 것으로 시작해 보겠습니다. public/class-toptal-save-public.php 에서 이 모든 작업을 수행합니다.

이 작업을 수행하는 동안 다음과 같은 특정 작업을 처리하기 위해 몇 가지 추가 도우미 함수를 만들어야 합니다.

  • 웹사이트의 고유한 쿠키 이름 만들기
  • 쿠키 만들기
  • 쿠키 값 가져오기
  • 설정에서 멤버십 상태 가져오기

이러한 도우미 기능에 대한 코드는 여기에서 찾을 수 있습니다.

get_unique_cookie_name() 함수는 웹사이트 URL, 웹사이트 이름 및 사용자 정의 접미사에서 고유한 쿠키 이름을 생성하는 데 도움이 됩니다. 이는 생성된 쿠키 이름이 동일한 도메인의 여러 WordPress 사이트에서 사용될 때 충돌하지 않도록 하기 위한 것입니다.

toptal_set_cookie() 및 toptal_get_cookie() 함수는 각각 쿠키를 만들고 값을 가져옵니다.

get_user_status() 함수는 설정에서 멤버십 확인란의 상태를 가져옵니다(선택하면 1을 반환하고 그렇지 않으면 0을 반환).

이제 저장 버튼을 표시하는 기능을 만드는 중요한 부분입니다. show_save_button() 함수에 대한 구현은 여기에서 찾을 수 있습니다. 그리고 여기에서 WordPress API의 몇 가지 새로운 기능을 사용했습니다.

  • get_queried_object_id() : 현재 쿼리된 개체의 ID를 검색합니다.
  • is_user_logged_in() : 현재 방문자가 로그인한 사용자인지 확인합니다.
  • get_user_meta() : 사용자에 대한 사용자 메타데이터 필드를 검색합니다.
  • wp_create_nonce() : 특정 작업, 사용자, 사용자 세션 및 시간 창에 연결된 암호화 토큰을 만듭니다.

이제 콘텐츠 끝에 버튼을 추가하는 함수를 만들어 보겠습니다. 여기에 두 가지 핵심 요구 사항이 있습니다.

  1. 버튼이 설정에서 선택된 게시물 유형에만 표시되는지 확인하십시오.
  2. 버튼을 추가하는 확인란이 선택되어 있는지 확인합니다.
 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

이제 이 함수를 the_content 후크에 연결해야 합니다.

왜요? the_content 는 게시물이 데이터베이스에서 검색된 후 화면에 인쇄되기 전에 게시물의 콘텐츠를 필터링하는 데 사용되기 때문입니다.

이를 통해 콘텐츠의 아무 곳에나 저장 버튼을 추가할 수 있습니다. 다음과 같이 define_public_hooks() 메서드의 included/class-toptal-save.php 에서 이를 수행할 수 있습니다.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

이제 플러그인 설정으로 이동하여 게시물과 페이지를 확인하고 버튼을 추가하면 모든 블로그 게시물에서 버튼이 표시되는 것을 볼 수 있습니다.

워드프레스 플러그인 설정 화면

여기에서 우리는 계속해서 해당 버튼의 스타일을 지정해야 합니다.

public/css/toptal-save-public.css 에서 그렇게 할 수 있습니다. 여기에서 업데이트된 CSS 파일을 찾으십시오.

이제 실제로 항목을 저장할 함수를 만들어 보겠습니다.

우리는 이것을 우리의 공개 수업에서 할 것이고, AJAX로 할 것입니다. 코드는 여기에 있습니다.

이 기능을 WordPress AJAX에 연결해 보겠습니다.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

플러그인의 AJAX에 대한 자세한 내용은 여기에서 읽을 수 있습니다.

이 부분을 마치기 전에 두 가지 작업을 더 해야 합니다.

  1. 스크립트를 현지화합니다.
  2. public/js/toptal-save-public.js에서 AJAX 호출을 생성합니다.

스크립트 현지화는 public/class-toptal-save-public.php 파일 내의 wp_localize_script() 함수를 통해 수행됩니다.

또한 "스타일 사용" 확인란의 상태에 따라 CSS 및 JS 파일 표시를 구현하도록 할 것입니다.

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

이제 AJAX 호출을 진행할 수 있습니다.

프론트엔드 스크립트는 "toptal-save-button" 클래스가 있는 요소를 찾습니다.

클릭 핸들러는 일치하는 모든 요소에 등록되어 API 호출을 수행하고 그에 따라 UI를 업데이트합니다.

여기에서 코드와 필요한 CSS를 찾을 수 있습니다.

항목이 추가될 때 알림을 처리하는 기능도 추가했습니다.

모든 작동 방식은 다음과 같습니다.

Wordpress 플러그인 데모 완료

다음으로 사용자가 원하는 곳에 삽입할 수 있는 단축 코드를 만들어야 합니다.

public/class-toptal-save-public.php 에서 그렇게 할 수 있습니다.

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

함수 자체는 아무 것도 하지 않기 때문에 등록도 해야 합니다.

Include/class-toptal-save.php 에서 버튼을 추가한 줄 뒤에 이 코드를 추가합니다.

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

이제 이것은 로더 클래스 내부에 add_shortcode() 메서드를 아직 로드하지 않았기 때문에 작동하지 않을 것입니다.

다음은 Include/class-toptal-save-loader.php 파일의 전체 코드입니다.

shortcodes 라는 새로운 보호 변수를 추가한 다음 클래스의 생성자 메서드에서 이를 배열로 바꿨습니다.

104행에서 단축 코드 생성을 담당하는 함수를 추가했습니다. "filter"를 "shortcode"로, "filters"를 "shortcodes"로 변경한 것을 제외하고는 위의 함수( add_filter() )와 거의 동일하다는 것을 알 수 있습니다.

또한 run() 메서드에서 단축 코드 배열을 통과하고 WordPress에 등록할 또 다른 foreach 를 추가했습니다.

그것은 쉽다.

처음에는 [toptal-saved] 단축 코드를 사용했기 때문에 저장된 항목을 모두 표시하는 메서드를 만들어 보겠습니다.

여기에서 이 방법에 대한 전체 코드를 찾으십시오.

이제 항상 그렇듯이 included/class-toptal-save.php 에 단축 코드를 등록해야 합니다.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

여기서 할 일이 두 가지 더 있습니다.

  1. 저장된 항목 페이지의 스타일을 지정합니다.
  2. 사용자가 저장된 항목을 제거하면 저장된 항목 페이지에서 사라지는지 확인하십시오.

첫 번째 작업의 경우 여기에서 필요한 CSS 코드를 찾을 수 있습니다.

두 번째 경우에는 약간의 프론트 엔드 스크립팅이 필요합니다.

이에 대한 전체 JavaScript 코드는 여기에서 찾을 수 있습니다.

52행에서 볼 수 있듯이 "toptal-saved-item" 클래스가 있는 div를 검색했습니다.

그런 다음 70-75행에서 상위 div에 toptal-saved-item 클래스가 있는지 확인합니다.

그렇다면 페이드아웃으로 항목을 숨긴 다음 애니메이션이 끝난 후 화면에서 항목을 완전히 제거합니다.

이제 더 어려운 부분인 모듈화로 넘어갑시다.

플러그인을 모듈화하십시오.

모듈식 플러그인의 기본 정의는 다음과 같습니다.

확장 가능 또는 모듈식 코드는 핵심 코드 기반을 수정하지 않고도 수정, 상호 작용, 추가 또는 조작할 수 있는 코드입니다.

이제 이 플러그인에 관해서는 사용자가 저장 항목 페이지에서 저장 항목 내부의 HTML을 변경할 수 있는지 확인합니다.

따라서 register_saved_shortcode() 메서드에서 몇 가지를 변경해야 합니다.

  • 사용자가 HTML을 변경할 수 있도록 하려면 html_to_return 을 inner_html_to_return 으로 변경합니다. inner_html_to_return 변수의 첫 번째 선언에 앞에 점이 없는 "="가 있는지 확인합니다.
  • apply_filters() 메서드를 사용하여 필터를 등록합니다.

이 두 가지 변경 사항을 사용하면 다음과 같이 끝납니다.

이제 사용자가 우리 코드와 상호 작용하기를 원하면 functions.php 파일에 다음과 같은 것을 추가할 수 있습니다.

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

번역 파일을 생성합니다.

번역은 WordPress 커뮤니티 구성원과 다국어가 플러그인을 번역하여 영어가 아닌 사이트에서 액세스할 수 있도록 하기 때문에 매우 중요합니다.

즉, WordPress가 번역을 처리하는 방법에 대한 몇 가지 기술적인 세부 사항을 살펴보겠습니다.

WordPress는 번역을 위해 GNU gettext 현지화 프레임워크를 사용합니다. 이 프레임워크에는 세 가지 유형의 파일이 있습니다.

  • POT(Portable Object Template)
  • 휴대용 물체(PO)
  • 기계 개체(MO)

이러한 각 파일은 번역 프로세스의 한 단계를 나타냅니다.

POT 파일을 생성하려면 WordPress 코드를 검색하고 __e() 및 _e() ) 와 같은 번역 기능에 전달된 모든 텍스트를 가져오는 프로그램이 필요합니다. 번역 기능에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

여기에서 POT 파일의 텍스트를 번역하여 영어와 번역을 모두 PO 파일에 저장하고 PO 파일을 MO 파일로 변환합니다.

플러그인에 있는 각 번역 가능한 파일에 대해 몇 줄의 코드를 작성해야 하므로 수동으로 이 작업을 수행하면 많은 시간이 걸립니다. 다행히도 Loco Translate라는 편리한 작은 플러그인을 사용하는 더 좋은 방법이 있습니다.

설치 및 활성화한 후 Loco Translate > Plugins > Toptal Save로 이동합니다.

여기에서 템플릿 편집을 클릭한 다음 동기화 및 저장을 클릭합니다. 그러면 언어 폴더 내의 toptal-save.pot 파일이 편집됩니다.

이제 플러그인을 번역할 수 있습니다.

지금 WordPress 플러그인을 빌드하세요.

우리는 이 기사에서 다소 간단한 플러그인을 구축했지만 그 과정에서 이 플러그인을 쉽게 유지 관리하고 확장할 수 있는 관행과 표준을 따랐습니다.

플랫폼의 전반적인 성능을 방해하지 않는 방식으로 WordPress 기능을 사용했습니다.

간단한 플러그인이든 복잡한 플러그인이든, 개인 개발자이든 WordPress 개발 회사이든 상관없이 모범 사례를 계획하고 따르는 것이 강력한 플러그인을 구축하는 데 중요합니다.