آموزش ساخت افزونه اختصاصی برای محصولات ( با PHP – نمونه کد پلاگین نویسی )
- افزونه وردپرس
- ۴ دی ۱۴۰۲
- 2,137 بازدید
آنچه در این پست میخوانید
آموزش ساخت افزونه
در این مقاله قراره بهتون یک آموزش خیلی خیلی حرفه ایی بدیم . این آموزش سرشار از نکات مهمه که باید سعی کنید اون ها رو در جایی یادداشت کنید تا اونهارو فراموش نکنید . پروسه نوشتن پلاگین و ساخت افزونه یک مقدار ممکنه برای وبمستران پیچیده تر باشه . در هر صورت اگر با وردپرس کار میکنید ، باید بگم که شما تقریبا باید ساخت افزونه وردپرس یا افزونه نویسی و قالب نویسی رو تا حدودی یاد داشته باشید.
اونوقت میتونید به خودتون به عنوان یک وردپرس کار حرفه ایی نگاه کنید و پروژه های فراوانی رو قبول کنید . این رویای خیلی از وبمسترانی است که هنوز محقق نشده ! پس برای کسب اطلاعات بیشتر ، وبیت رو تا انتهای این مقاله همراهی کنید تا توسعه سایت وردپرسی رو یاد بگیرید و نکاتی رو هم در زبان PHP متوجه بشید که میتونند خیلی کاربردی باشند .
پیش زمینه ساخت افزونه های اختصاصی در وردپرس
به دلیل اینکه حجم آموزش ساخت افزونه (به خاطر قرار دادن کدهای ساخت افزونه بروی وبسایته) کمی زیاد میشه ، یک راست میریم به اصل مطلب و از مقدمات و … که از هدف مقاله دوره ، پرهیز میکنیم.
برای شروع کار شما باید وارد وردپرس خود شوید و از بخش wp-content، گزینه Plugins را انتخاب کنید؛ حالا یک فایل جدید به اسم “carousel-vebeet” بسازید؛ وارد این پوشه جدید شوید و یک فایل PHP دقیقاً به همین اسم در آن ایجاد کنید و قطعه کدی که در اینجا برای شما قرار دادیم را در این فایل PHP جایگذاری کنید:
/* Plugin Name: carousel vebeet Plugin URI: vebeet.com Description: new plugins Author: webmaster vebeet Author URI: vebeet.com */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly }
در این مقاله (ساخت افزونه) ما کدهای فرانت اند رو بررسی نمی کنیم و اونها رو آموزش نمیدیم و فقط بروی بک اند و main برنامه کار میکنیم ، چون استایل ها و فرانت یک کار سلیقه ایی هست و شما خودتون اگر فرانت اند کار کرده باشید ، میتونید از پسش بربیاید . اما اگر میخواهید استایل هارو اضافه کنید که باید هم این کارو بکنید ، ابتدا باید استایلها و اسکریپتهارو اضافه کنید . برای این کار میتوانید از کد زیر استفاده کنید:
function plugin_scripts_styles(){ wp_enqueue_style( 'style', plugins_url('/css/style.css', __FILE__ ), array(), '1.0.0' ); wp_enqueue_script( 'imagesloaded'); wp_enqueue_script( 'owl-carousel', plugins_url('/js/owl.carousel.js', __FILE__ ), array('jquery'), '', true); wp_enqueue_script( 'main', plugins_url('/js/main.js', __FILE__ ), array('jquery'), '', true); } add_action( 'wp_enqueue_scripts', 'plugin_scripts_styles' );
خب اول برای اینکه بتونیم سبکهای موردنظر خودمون را ذخیره کنیم، یک فایل CSS اضافه کردیم؛ بعد از آن هم برای ساخت افزونه ، افزونه داخلی ImageLoaded که همراه با استه وردپرس است را بارگذاری کردیم. حالا باید یک carousel ایجاد کنیم که برای این کار هم نیاز به یک افزونه jQuery و فایل اصلی js داریم؛ که پیشنهاد ما برای افرونه OwlCarousel است.
بخش شورت کد تب بندی بسازید
حال بعد از انجام کارهای بالا ، نوبت به این رسیده که یک تب شورت کد ایجاد کنید، این تب از دوتا بخش شورت کد تشکیل شده، یکی از این بخشها Parent یا همان والدین و موارد دیگه Child است. این قطعه کدی که در اینجا قرار دادیم مربوط به اولین بخش والدین است که شما باید آن را به فایل PHP که در مرحله اول ایجاد کردید، اضافه کنید.
function et_tab($atts, $content = null) { extract(shortcode_atts(array(), $atts)); $output = ''; static $id_counter = 1; $class = array(); $class[] = 'et-tab'; $class[] = 'et-clearfix'; $output .='<div id="et-tab-'.$id_counter.'" class="'.implode(" ", $class).'">'; $output .= do_shortcode($content); $output .= '</div>'; $id_counter++; return $output; } add_shortcode('et_tab', 'et_tab');
از کد زیر برای ایجاد برگه کودک یا Child استفاده کنید:
function et_tab_item($atts, $content = null) { extract(shortcode_atts(array( 'title' => '', 'active' => 'false', ), $atts)); $output = ''; static $id_counter = 1; $class = array(); $class[] = 'tab-item'; $class[] = 'et-clearfix'; $class[] = 'active-'.esc_attr($active); $output .= '<div data-target="tab-'. sanitize_title( $title ) .'" class="'.implode(' ',$class).'">'; if (isset($title) && !empty($title)) { $output .= esc_attr($title); } $output .= '</div> '; $output .= '<div id="tab-'.sanitize_title($title).'-'.$id_counter.'" class="tab-content et-clearfix">'; $output .= do_shortcode($content); $output .= '</div>'; $id_counter++; return $output; } add_shortcode('et_tab_item', 'et_tab_item');
خب حالا ممکن است شما بخواهید این موارد در صفحه اول نمایش داده شوند، اما در مرورگر برای شما نشان داده شده؛ در این صورت شما یک خروجی HTML بدون هیچ استایل و فانکشن میبینید که باید آن را از طریق روشی که در زیر برای شما میگیم؛ تغییر دهید. برای اینکه بتوانید این محتوا را قدرتمندتر کنید باید به فایل main.js برید و کد زیر را در آن جایگذاری کنید:
function($){ "use strict"; $('.et-tab').each(function(){ var $this = $(this), tabs = $this.find('.tab-item'), tabsQ = tabs.length, tabsContent = $this.find('.tab-content'); tabs.wrapAll('<div class="tabset et-clearfix"></div>'); tabsContent.wrapAll('<div class="tabs-container et-clearfix"></div>'); var tabSet = $this.find('.tabset'); if(!tabs.hasClass('active')){ tabs.first().addClass('active'); } tabs.each(function(){ var $thiz = $(this); if ($thiz.hasClass('active')) { $thiz.siblings() .removeClass("active"); tabsContent.hide(0).removeClass('active'); tabsContent.eq($thiz.index()).show(0).addClass('active'); } }); if(tabsQ >= 2){ tabs.on('click', function(){ var $self = $(this); if(!$self.hasClass("active")){ $self.addClass("active"); $self.siblings() .removeClass("active"); tabsContent.hide(0).removeClass('active'); tabsContent.eq($self.index()).show(0).addClass('active'); } }); } }); })(jQuery);
تا اینجای کار شما موفق شدید یک تب ایجاد کنید، حال اگر تمایل داشته باشید میتوانید استایل آنها را بهصورت دلخواه طراحی کنید و در فایل استایل افزونه قرار دهید
ایجاد شورت کد ساخت آرشیو محصولات ووکامرس
در این مرحله باید به فکر ساخت شورت کدی برای محصولات باشیم. با استفاده از این کد، وقتی یک جستجوی ساده کوئری انجام شود، یک سری محصولات انتخاب و برای شما بهصورت نتایج جستجو نمایش داده میشود. شما میتوانید بر اساس این نتیجهی بهدست آمده، محصولات را بر اساس یک سری ویژگی مثل ویژگیهای محصول، میزان فروش و یا محصولاتی که بهترین فروش را داشته مشخص و دستهبندی کنید. حالا شما باید این دستهبندیهایی که انجام دادید به شما یک سری محتوا برای تب محصولات در ووکامرس میدهد که میتوانید خیلی راحت از آن استفاده کنید را به فایل PHP اضافه کنید.
افزودن کد به فایل PHP
در قدم بعدی باید این کد را به فایل PHP اضافه کنید:
function et_products($atts, $content = null) { extract(shortcode_atts( array( 'layout' => 'grid', // grid OR carousel 'autoplay' => 'false', // true OR false 'columns' => '1', // 1 | 2 | 3 | 4 'rows' => '1', // 1 | 2 | 3 | 4 - carousel only 'quantity' => '12', 'type' => 'recent', // recent | featured | sale | best_selling ), $atts) ); static $id_counter = 1; if (class_exists('Woocommerce')) { $output = ''; global $post; $query_options = array( 'post_type' => 'product', 'post_status' => 'publish', 'meta_query' => WC()->query->get_meta_query(), 'tax_query' => WC()->query->get_tax_query(), 'ignore_sticky_posts' => 1, 'posts_per_page' => absint($quantity), ); if ($type == "featured"){ $query_options = array( 'post_type' => 'product', 'post_status' => 'publish', 'meta_query' => WC()->query->get_meta_query(), 'ignore_sticky_posts' => 1, 'posts_per_page' => absint($quantity), 'tax_query' => array( array( 'taxonomy' => 'product_visibility', 'field' => 'name', 'terms' => 'featured', 'operator' => 'IN', ) ), ); } if ($type == "sale"){ $query_options = array( 'post_type' => 'product', 'post_status' => 'publish', 'meta_query' => WC()->query->get_meta_query(), 'ignore_sticky_posts' => 1, 'posts_per_page' => absint($quantity), 'post__in' => array_merge( array( 0 ), wc_get_product_ids_on_sale() ), ); } if ($type == "best_selling"){ $query_options = array( 'post_type' => 'product', 'post_status' => 'publish', 'meta_query' => WC()->query->get_meta_query(), 'tax_query' => WC()->query->get_tax_query(), 'ignore_sticky_posts' => 1, 'posts_per_page' => absint($quantity), 'orderby' => 'meta_value_num', 'meta_key' => 'total_sales', ); } $products = new WP_Query($query_options); if($products->have_posts()){ $counter = 1; $class = array(); $attributes = array(); $class[] = 'products'; $class[] = esc_attr($layout); if ($layout == 'carousel') { $class[] = 'owl-carousel'; } $attributes[] = 'data-columns="'.esc_attr($columns).'"'; $attributes[] = 'data-autoplay="'.esc_attr($autoplay).'"'; $output .= '<ul class="'.esc_attr(implode(' ', $class)).'" '.implode(' ', $attributes).'>'; while ($products->have_posts() ) { $products->the_post(); global $product; if ($layout == "carousel" && $rows != 1) { $product_wrapper_start = ''; $product_wrapper_end = ''; if (($counter % 2 == 1 && $rows == 2) || ($counter % 3 == 1 && $rows == 3) || ($counter % 4 == 1 && $rows == 4)){ $product_wrapper_start = '<li class="product-wrapper">'; } if (($counter % 2 == 0 && $rows == 2) || ($counter % 3 == 0 && $rows == 3) || ($counter % 4 == 0 && $rows == 4)){ $product_wrapper_end = '</li>'; } $output .= $product_wrapper_start; $output .= '<div class="product" id="product-'.esc_attr($product->get_id()).'">'; ob_start(); do_action( 'woocommerce_before_shop_loop_item' ); do_action( 'woocommerce_before_shop_loop_item_title' ); do_action( 'woocommerce_shop_loop_item_title' ); do_action( 'woocommerce_after_shop_loop_item_title' ); do_action( 'woocommerce_after_shop_loop_item' ); $output .= ob_get_clean(); $output .= '</div>'; $output .= $product_wrapper_end; $counter++; } else { $output .= '<li class="product" id="product-'.esc_attr($product->get_id()).'">'; ob_start(); do_action( 'woocommerce_before_shop_loop_item' ); do_action( 'woocommerce_before_shop_loop_item_title' ); do_action( 'woocommerce_shop_loop_item_title' ); do_action( 'woocommerce_after_shop_loop_item_title' ); do_action( 'woocommerce_after_shop_loop_item' ); $output .= ob_get_clean(); $output .= '</li>'; } } wp_reset_postdata(); $output .= '</ul>'; $id_counter++; return $output; } } else { echo "Please install/activate Woocommerce plugin"; } } add_shortcode('et_products', 'et_products');
پایان مقاله ساخت افزونه اختصاصی
اگر شما هم تا اینجا در این مقاله ساخت افزونه با وبیت پیش رفتید ، باید بگم که تا الان موفق شدید که یک افزونه (main افزونه یا اصل کاری رو انجام دادید ) را بسازید . اگر قصد داشته باشید که این افزونه را از نظر تنظیمات و استایل ها مورد بررسی قرار بدهید ، باید بگم که کار بسیار ساده ایی در پیش خواهید داشت . چون اکثرا در قضایای فرانت اند و طراحی شکل و شمایل افزونه مشکلی ندارید.
فقط میمونه تنظیمات اولیه که اون هم به سادگی قابل انجامه و اصلا نیاز به آموزش خاصی ندارد ، چرا که از این به بعد برای کامل کردن افزونه ، نقشه راه شما خیلی ساده میشه و همه کارهارو خودتون میتونید انجام بدهید . باز هم اگر جایی به مشکل خوردید ، حتما مشکل تون رو با وبیت به اشتراک بگذارید تا ما هم بتونیم به شما کمک کنیم .