افزودن فیلدهای اختصاصی به صفحه محصول ووکامرس فارسی
WooCommerce مسلما محبوب ترین راه برای فروش محصولات با استفاده از وردپرس است. نرم افزار وردپرس حدود 25 درصد از سایت های اینترنت و WooCommerce تقریبا 39٪ از تمام فروشگاه های آنلاین را به خود اختصاص داده اند، شرط استفاده اگر شما به دنبال بازار کالا و فروش به مشتریان باشید.
اما در هر نرم افزار ما و یا مشتریان ما اغلب می خواهیم به گسترش مجموعه ای از ویژگیفراتر از چیزی که ارائه شده است بپردازیم.
نکته: در WooCommerce، اجازه دهید بگویم که شما می خواهید یک محصول ساده به فروش برسانید اما می خواهید که شامل اطلاعات کمی بیشتر در مورد محصول برای نمایش در جلویی و قبل از خرید در سایت باشد برای همین این مقاله نوشته شده است.
با استفاده از یک قلاب یا همان (هوک hooks) ارائه شده توسط WooCommerce و قابلیت های سفارشی که ما می نویسیم، ما می توانیم دقیقا همان کار را انجام دهیم.
قبل از شروع، من فرض کنم مجموعه راه اندازی زیر (یا چیزی شبیه با آن) بر روی دستگاه شما باشد:
سیستم عامل خود را از انتخاب کنید – ویندوز یا مک فرقی ندارد
حداقل PHP 5.6.25، هر چند من از پی اچ پی 7 استفاده می کنم.
ماژول 5.6.33
آپاچی یا Nginx
وردپرس 4.7 یا آخرین نسخه.
آخرین ووکامرس فارسی WooCommerce
IDE مورد علاقه
برای بقیه آموزش، فرض کنیم که همه از این نصب شده است، فعال، و در حال اجرا باشند.
اگر شما به طور خاص برای این آموزش WooCommerce را دانلود کنید، نیاز به نگرانی در مورد چیزهایی مانند صفحات پرداخت، شرایط و ضوابط و یا چیزی شبیه به آن وجود ندارد. در واقع ما فقط در متا باکس محصول ساده در این آموزش متمرکز می شویم.
وقتی که صحبت کار با وردپرس می آید، مفهوم زمینه های سفارشی معمولا با آن مختلف تعریف می شوند:
وردپرس توانایی اجازه دادن به نویسندگان به اختصاص زمینه های سفارشی به یک پست را می دهد. این اطلاعات اضافی به عنوان شناخته شده داده های متا نام برده میشود و ما از همین ویژگی استفاده میکنیم .
برای غیر طراحان وب سایت این اطلاعات غیرضروری است اما برای توسعه دهندگان یکی از اطلاعات و ابزار مورد نیاز برای ساخت چیزی فراتر از محصول ارائه شده با امکانات مختلف و مخصوص برای هر استارت آپ و ایده اختصاصی است.
در عوض، من در مورد کادرهای متنی بخش Linked Product که به معرفی محصولات مرتبط با محصولات ساده (Simple Product) است صحبت می کنم.
اما ما بعد در ادامه آموزش از آن استفاده می کنیم. در حال حاضر، اجازه دهید شروع کنید.
همانند وردپرس ووکامرس از کدهای به اصطلاح API در چرخه عملکرد خود استفاده میکنید تا دستورات آن اجرا شود که ما با کمک قلاب یا HOOk به هر کدام از این API ها وصل می شویم البته متا داده های یا کدهای دستوری ووکامرس با وردپرس کاملا فرق دارد.
در کل دو نوع قلاب یا هوک مهم هستند که بایستی بدانید که عبارتند از:
مانند تمامی هوک های استفاده شده در وردپرس ، این کار مستلزم تعریف کردن هوک و تعریف فانکشن اختصاصی برای آن است. برای این کار بایستی برنامه خاصی برای آن بنویسید ، در این آموزش مانند از برنامه نوشته شده object-oriented استفاده می کنیم.
ابتدا، ما باید کلاس تعریف کنیم که متغییر به عنوان داده داشته باشد. این متغییر ID فیلدی که ما بعد از درج در سایت ظاهر خواهد شد را دارد:
<?php class TutsPlus_Custom_WooCommerce_Field { private $textfield_id; }
بعد، ما این متغیر در کلاس مقداردهی اولیه قرار می دهیم :
<?php class TutsPlus_Custom_WooCommerce_Field { private $textfield_id; public function __construct() { $this->textfield_id = 'tutsplus_text_field'; } }
ذر این لحظه، ما می توانیم از هوک درج شده در بالا استفاده کنیم، برای این کار، هر چند، یک تابع مقدار دهی اولیه که دو توابع سفارشی را با قلاب ثبت کردایم.
در دو بخش زیر، دقیقا ببینید که چگونه به پیاده سازی توابع سفارشی می پردازیم.
ابتدا ، ما می خواهیم تابع یا فنکشن اضافه کنیم که به woocommerce_product_options_grouping
قلاب شده اند . در تابع init انجام شده که ما در بخش قبلی تعریف کردیم، دقیقا همان را انجام می دهیم.
<?php class TutsPlus_Custom_WooCommerce_Field { private $textfield_id; public function __construct() { $this->textfield_id = 'tutsplus_text_field'; } public function init() { add_action( 'woocommerce_product_options_grouping', array( $this, 'product_options_grouping' ) ); } public function product_options_grouping() { } }
توجه کنید که تابع به نام product_options_grouping
است تا یافتن این کد کمی آسان تر شود. گرچه کارکرد، با نام آن ممکن است توصیفی از آنچه تابع انجام می دهد مشخص نکند ، اما آن را به قلاب مربوط می کند.
بعد، ما نیاز به پیاده سازی تابع داریم. برای انجام این کار، ما برخی از اطلاعات را نیاز داریم:
همه اطلاعات فوق در یک آرایه انجمنی تنظیم و پس از آن به woocommerce_wp_text_input
صادر خواهد شد. این یک تابع WooCommerce API است طراحی شده تا یک عبارت متن با شرایط فوق را خارج نماید.
<?php class TutsPlus_Custom_WooCommerce_Field { private $textfield_id; public function __construct() { $this->textfield_id = 'tutsplus_text_field'; } public function init() { add_action( 'woocommerce_product_options_grouping', array( $this, 'product_options_grouping' ) ); } public function product_options_grouping() { $description = sanitize_text_field( 'Enter a description that will be displayed for those who are viewing the product.' ); $placeholder = sanitize_text_field( 'Tease your product with a short description.' ); $args = array( 'id' => $this->textfield_id, 'label' => sanitize_text_field( 'Product Teaser' ), 'placeholder' => 'Tease your product with a short description', 'desc_tip' => true, 'description' => $description, ); woocommerce_wp_text_input( $args ); } }
در این نقطه، ما باید در بخش اول از پلاگین استفاده میکنیم . ما هنوز به نوشتن کدی نیاز داریم که همه چیز مجموعه در تغییر باشد ، و نیز ما هنوز به نوشتن کدی که موجب ذخیره اطلاعات در پایگاه داده شود ، بنابراین اجازه دهید در حال حاضر آن کار را انجام دهیم .
بعد، اضافه کردن خطوط زیر از کد را به روش init
:
<?php add_action( 'woocommerce_process_product_meta', array( $this, 'add_custom_linked_field_save' ) );
پس از آن، مطمئن شوید که تابع add_custom_linked_field_save
را اضافه کنید
<?php public function add_custom_linked_field_save( $post_id ) { if ( ! ( isset( $_POST['woocommerce_meta_nonce'], $_POST[ $this->textfield_id ] ) || wp_verify_nonce( sanitize_key( $_POST['woocommerce_meta_nonce'] ), 'woocommerce_save_data' ) ) ) { return false; } $product_teaser = sanitize_text_field( wp_unslash( $_POST[ $this->textfield_id ] ) ); update_post_meta( $post_id, $this->textfield_id, esc_attr( $product_teaser ) ); }
ما کمی در مورد اجرای تابع در بخش بعدی صحبت می کنیم .
پاک سازی داده
توجه کنید که در تابع فوق، سه چیز اتفاق می افتد:
false
داریم. این یک اقدام احتیاطی امنیتی استاندارد است. مقدار فعلی با داده های افزونه WooCommerce شناسایی و در کد منبع است.POST_$
متناظر با ورودی کاربر .توجه داشته باشید که ما در واقع به ارائه اطلاعات مربوط به نمایه نمی پردازیم. پس get_post_meta
نیست ، با این حال، با اینکار می خواهیم اطلاعات در بخش جلویی یا نمایه قرار دهیم.
ارائه اطلاعات مربوط به نمایه، ما نیاز به یک کلاس داریم که بسیاری از همین کارهایی که در حال حاضر انجام داده ام را انجام خواهد داد. به طور دقیق، ما نیاز داریم:
تنظیم این موارد در واقع مشکل نیست از آنجایی که ما در حال حاضر این را انجام داده ایم، بنابراین به تصویب این کلاس با پایان زیر می پردازیم؛ با این حال، چند دیدگاه در مورد تنظیم این کلاس تا پس از پایان آن را داشته باشیم:
<?php class TutsPlus_Custom_WooCommerce_Display { private $textfield_id; public function __construct() { $this->textfield_id = 'tutsplus_text_field'; } public function init() { add_action( 'woocommerce_product_thumbnails', array( $this, 'product_thumbnails' ) ); } public function product_thumbnails() { $teaser = get_post_meta( get_the_ID(), $this->textfield_id, true ); if ( empty( $teaser ) ) { return; } echo esc_html( $teaser ); } }
نتیجه نهایی باید چیزی شبیه به این باشد:
در این لحظه، برخی از کد ها برداشته شده است. به طور دقیق، عموم مردم و آدمین هر دو از یک textfield_ID
استفاده می کنند تنظیم آن را در سازنده خود است. این کد ها با عنوان برنامه نویسی شی گرا هستند.
تعدادی از راه هایی است که ما می توانیم آن ها را کاهش ذهیم ، مانند عبور از ارزش به سازنده زمانی که کلاس ها نمونه، با استفاده از یک الگوی طراحی ساده به کمک هماهنگ کننده اطلاعات بین دو کلاس ها، و غیره وجود دارد.
در فایل است که به همراه این آموزش است ، که می تواند با استفاده از لینک دانلود شده نمایید، شما در واقع می خواهید دید که چگونه من داده های گذاشتیم تا کمی مدیریت آن ها ساده تر شود.
در مرحله دوم، توجه داشته باشید که با استفاده از قلاب woocommerce_product_thumbnails
برای رندر ارائه اطلاعات استفاده کردیم. تعدادی از قلاب های WooCommerce در دسترس وجود دارد، و یکی از قلاب های موجود را انتخاب کنیم. شما می توانید رایگان از طریق مستندات قلاب بهتر برای نیازهای شما را انتخاب نمایید.
در نهایت، آخرین چیزی که ما باید انجام دهیم راه اندازی یک فایل bootstrap که این شروع افزونه خواهد بود.در تعدادی از انجام آموزش های قبلی روش ساخت آن قرار دارد.
کد زیر که ما چگونه به شکستن آن می پردازیم:
<?php /** * The plugin bootstrap file * * This file is read by WordPress to generate the plugin information in the * plugin admin area. This file also includes all of the dependencies used by * the plugin, and defines a function that starts the plugin. * * @link https://marketfarsi.ir/ * @package CWF * * @wordpress-plugin * Plugin Name: Tuts+ Custom WooCommerce Field * Plugin URI: https://marketfarsi.ir/ * Description: Demonstrates how to add a custom field to a Simple Product. * Version: 1.0.0 * Author: Asakereh * Author URI: https://marketfarsi.ir/ * License: GPL-2.0+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */ defined( 'WPINC' ) || die; include_once 'admin/class-tutsplus-custom-woocommerce-field.php'; include_once 'public/class-tutsplus-custom-woocommerce-display.php'; add_action( 'plugins_loaded', 'tutsplus_wc_input_start' ); /** * Start the plugin. */ function tutsplus_wc_input_start() { if ( is_admin() ) { $admin = new TutsPlus_Custom_WooCommerce_Field( 'tutsplus_text_field' ); $admin->init(); } else { $plugin = new TutsPlus_Custom_WooCommerce_Display( 'tutsplus_text_field' ); $plugin->init(); } }
توجه داشته باشید که پس از راه افتادن تابع ، چک کنید داشبورد آن را نمایش داده یا نه. اگر چنین است، پس بخش مناسب از پلاگین لود است. در این صورت، صفحه نمایش استاندارد لود شده است، که شما می توانید در صفحه محصول آن را مشاهده کنید.
در این لحظه، ما همه چیز ما قدم به قدم در مقدمه آموزش پوشش داده ایم:
فراموش نکنید که نسخه ی نمایشی کار نهایی را می توانید دانلود نمایید. علاوه بر این، اگر شما به WooCommerce علاقه مند هستید، فراموش نکنید که برخی از آموزش های دیگر ما و یا برخی از آیتم های ما را در فروشگاه دریافت نمایید.
فراموش نکنید که برای اطلاع رسانی و درخواست هر گونه سوال یا نظر در قسمت زیر دیدگاه خود را بنویسید!
English Article
WooCommerce is arguably the most popular way to sell products using WordPress. With WordPress powering roughly 25% of the Internet and WooCommerce powering roughly 39% of all online stores, it’s a safe bet to use the two in conjunction with one another if you’re looking to market goods to customers.
But, as with any software, there are times where we or our clients often want to extend the feature set beyond what’s offered out of the box.
Case in point: With WooCommerce, let’s say that you have a simple product that you want to sell but you want to include a little more information about the product to display on the front-end.
Using a couple of hooks provided by WooCommerce and custom functionality that we’ll write, we’ll take a look at how we can do exactly that.
Before we get started, I assume that you have the following setup (or something comparable) on your machine:
For the rest of the tutorial, I assume that all of this is installed, activated, and running.
If you download WooCommerce specifically for this tutorial, there’s no need to worry about things like the checkout pages, terms and conditions, or anything like that. In fact, we’re only going to be focused on the Simple Product meta box throughout the rest of this tutorial.
When it comes to working with WordPress, the notion of custom fields usually carries with it a different definition:
WordPress has the ability to allow post authors to assign custom fields to a post. This arbitrary extra information is known as meta-data.
For non-developers, this type of information can be a bit more complex and unnecessary. But if you’re used to working with it, then it’s important to note that when I refer to custom fields in this tutorial, I’m talking about something completely different.
Instead, I’m talking about an actual text field that we’ll introduce into the Linked Product tab of the Simple Product type.
But we’ll get to that later in the tutorial. For now, let’s get started.
Much like WordPress, WooCommerce provides an API that allows us to hook into part of its page lifecycle. So although you may have worked with the WordPress metadata API before, doing so with WooCommerce is different.
There are two hooks that are important to know:
As with all hooks in WordPress, these will require that we define these hooks and then define custom functionality for them. Though you can do this using procedural programming, this tutorial will be implementing the functionality using object-oriented programming.
First, we’ll define a class that will have a since variable as its instance data. This variable will represent the ID of the input field that will appear in the user interface:
<?php class TutsPlus_Custom_WooCommerce_Field { private $textfield_id; }
Next, we’ll initialize this instance variable in the constructor of the class:
<?php class TutsPlus_Custom_WooCommerce_Field { private $textfield_id; public function __construct() { $this->textfield_id = 'tutsplus_text_field'; } }
In the following two sections, we’ll see exactly how to implement the custom functionality.
First, we’ll want to add a function that’s hooked to woocommerce_product_options_grouping
. In the init function that we defined in the previous section, we’ll do exactly that.
<?php class TutsPlus_Custom_WooCommerce_Field { private $textfield_id; public function __construct() { $this->textfield_id = 'tutsplus_text_field'; } public function init() { add_action( 'woocommerce_product_options_grouping', array( $this, 'product_options_grouping' ) ); } public function product_options_grouping() { } }
product_options_grouping
. I find doing this makes the code a bit easier to read. Though the function, on its own, may not be highly descriptive of what the function does, it relates itself to its respective hook.Next, we need to implement the function. To do this, we’ll need some information:
All of the above information will be set in an associative array and will then be passed to woocommerce_wp_text_input
. This is a WooCommerce API function designed to output a text element with the above arguments.
<?php class TutsPlus_Custom_WooCommerce_Field { private $textfield_id; public function __construct() { $this->textfield_id = 'tutsplus_text_field'; } public function init() { add_action( 'woocommerce_product_options_grouping', array( $this, 'product_options_grouping' ) ); } public function product_options_grouping() { $description = sanitize_text_field( 'Enter a description that will be displayed for those who are viewing the product.' ); $placeholder = sanitize_text_field( 'Tease your product with a short description.' ); $args = array( 'id' => $this->textfield_id, 'label' => sanitize_text_field( 'Product Teaser' ), 'placeholder' => 'Tease your product with a short description', 'desc_tip' => true, 'description' => $description, ); woocommerce_wp_text_input( $args ); } }
Next, add the following lines of code into the init
method:
<?php add_action( 'woocommerce_process_product_meta', array( $this, 'add_custom_linked_field_save' ) );
After that, be sure to add the add_custom_linked_field_save
function.
<?php public function add_custom_linked_field_save( $post_id ) { if ( ! ( isset( $_POST['woocommerce_meta_nonce'], $_POST[ $this->textfield_id ] ) || wp_verify_nonce( sanitize_key( $_POST['woocommerce_meta_nonce'] ), 'woocommerce_save_data' ) ) ) { return false; } $product_teaser = sanitize_text_field( wp_unslash( $_POST[ $this->textfield_id ] ) ); update_post_meta( $post_id, $this->textfield_id, esc_attr( $product_teaser ) ); }
Sanitizing the Data
Notice in the function above, there are three things happening:
false
. This is a standard security precaution. The nonce values are detected by looking specifically at what WooCommerce provides in the source code.$_POST
collection corresponding with the user’s input.Note that we don’t actually do anything to render the information on the front-end yet so there’s no call to get_post_meta
. This is, however, how we’ll render information on the front-end.
To render information on the front-end, we’re going to need a class that will do a lot of the same work we’ve already done. Specifically, we’ll need:
Setting this up isn’t actually that difficult since we’ve already done this, so I’m going to pass the class in its entirety below; however, I’ll have a few comments to make about the way we’re going about setting this class up after the jump:
<?php
class
TutsPlus_Custom_WooCommerce_Display {
private
$textfield_id
;
public
function
__construct() {
$this
->textfield_id =
'tutsplus_text_field'
;
}
public
function
init() {
add_action(
'woocommerce_product_thumbnails'
,
array
(
$this
,
'product_thumbnails'
)
);
}
public
function
product_thumbnails() {
$teaser
= get_post_meta( get_the_ID(),
$this
->textfield_id, true );
if
(
empty
(
$teaser
) ) {
return
;
}
echo
esc_html(
$teaser
);
}
}
The end result should be something like this:
At this point, we have some redundant code. Specifically, the public and the administrative classes both use a textfield_ID
and set it up in their constructor. This is a code smell as it violates the whole DRY principle of object-oriented programming.
There are a number of ways that we could mitigate this, such as passing the value into the constructors when the classes are instantiated, using a simple design pattern to orchestrate information between the two classes, and so on.
In the file that accompanies this tutorial, which can be downloaded using the link in the sidebar, you’ll actually see how I’ve passed the value into the constructor to make it a bit easier to manage.
Secondly, note that I’m using the woocommerce_product_thumbnails
hook to help render the information. There are a number of hooks WooCommerce made available, and I simply chose this one from the available hooks to render it. You can feel free to pore through the documentation to determine which hook works best for your needs.
Finally, the last thing we need to do is to set up a bootstrap file that will start the plugin. We’ve done this in a number of my previous tutorials so I’m not going to spend too much time belaboring the point.
Here’s the code for how I’m breaking it up:
<?php /** * The plugin bootstrap file * * This file is read by WordPress to generate the plugin information in the * plugin admin area. This file also includes all of the dependencies used by * the plugin, and defines a function that starts the plugin. * * @link https://marketfarsi.ir * @package CWF * * @wordpress-plugin * Plugin Name: Tuts+ Custom WooCommerce Field * Plugin URI: https://marketfarsi.ir * Description: Demonstrates how to add a custom field to a Simple Product. * Version: 1.0.0 * Author: Tom McFarlin * Author URI: https://marketfarsi.ir * License: GPL-2.0+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */ defined( 'WPINC' ) || die; include_once 'admin/class-tutsplus-custom-woocommerce-field.php'; include_once 'public/class-tutsplus-custom-woocommerce-display.php'; add_action( 'plugins_loaded', 'tutsplus_wc_input_start' ); /** * Start the plugin. */ function tutsplus_wc_input_start() { if ( is_admin() ) { $admin = new TutsPlus_Custom_WooCommerce_Field( 'tutsplus_text_field' ); $admin->init(); } else { $plugin = new TutsPlus_Custom_WooCommerce_Display( 'tutsplus_text_field' ); $plugin->init(); } }
Notice that I include the dependencies and then, once the function fires, I check to see if the dashboard is being displayed or not. If so, then the proper part of the plugin is loaded; otherwise, the standard display is loaded, which you can see on the product page.
At this point, we’ve covered everything we set out to do in the introduction of the tutorial:
Don’t forget to download the final working demo. Furthermore, if you’re interested in WooCommerce, don’t forget to check out some of our other tutorials or some of the items we have in our marketplace.
As usual, if you’re looking for other WordPress-related material, you can find all of my previous tutorials on my profile page, and you can follow me on my blog or on Twitter.
Don’t forget to leave any questions or comments in the feed below!