Jak stworzyć niestandardową wtyczkę WordPress?
Opublikowany: 2022-02-24Szukasz sposobów na stworzenie niestandardowej wtyczki WordPress? W tym samouczku pokażemy, jak zbudować od podstaw wtyczkę WP, która pozwoli usunąć niektóre elementy ze stron produktów WooCommerce.
Zanim przejdziemy przez ten proces, przyjrzyjmy się, dlaczego najpierw może być konieczne utworzenie niestandardowej wtyczki WordPress.
Po co tworzyć niestandardową wtyczkę w WordPressie?
Wszyscy wiemy, że w WordPressie dostępna jest ogromna liczba darmowych i płatnych wtyczek. Wszystkie są opracowane z różnymi funkcjami, aby zwiększyć funkcjonalność Twojej witryny. Jednak niektóre funkcje wtyczki mogą być niepotrzebne w Twojej witrynie i mogą działać jako dodatkowa waga dla Twojej struktury.
Czasami wystarczy narzędzie z bardzo specyficzną funkcją. Ale niektóre wtyczki są tak przeładowane dodatkowymi funkcjami, że nie będziesz mógł ich w pełni wykorzystać. W takich przypadkach możesz po prostu utworzyć własną niestandardową wtyczkę WordPress.
Załóżmy na przykład, że chcesz usunąć elementy ze strony produktu lub innych stron WooCommerce za pomocą dedykowanej wtyczki. Większość wtyczek zapewnia dodatkowe funkcje, inne niż usuwanie elementów. Zwiększy to rozmiar wtyczki, a także pamięć witryny, co może również utrudnić działanie Twojej witryny.
Oczywiście możesz również użyć skryptu CSS lub haków WooCommerce, aby usunąć elementy. Mogą jednak powodować problemy w Twojej witrynie, jeśli zaktualizujesz motyw WordPress bez odpowiedniego wykonania. Ale jeśli utworzysz niestandardową wtyczkę, modyfikacje będą mniej prawdopodobne, że utrudnią działanie Twojej witryny w żadnych okolicznościach.
Jak stworzyć niestandardową wtyczkę WordPress?
Cały proces tworzenia niestandardowej wtyczki WordPress jest znacznie łatwiejszy niż myślisz. Ale zacznijmy od kilku rzeczy, o których powinniśmy pamiętać, zanim stworzymy niestandardową wtyczkę.
1. Przygotowanie do startu
Istnieje szereg wymagań, które powinieneś spełnić, aby stworzyć niestandardową wtyczkę WordPress. Oni są:
- Instalacja WordPressa na serwerze localhost
Chociaż możesz opracować wtyczkę na aktywnym serwerze, bardzo złą praktyką jest robienie tego, gdy witryna jest online. Jeśli wprowadzisz jakiekolwiek niepotrzebne zmiany w witrynie, mogą wystąpić poważne problemy. Aby temu zapobiec, musisz skonfigurować środowisko testowe localhost, aby utworzyć niestandardową wtyczkę WordPress, jeśli jeszcze jej nie masz.
- Użyj edytora kodu
WordPress ma wbudowany edytor wtyczek do dodawania i modyfikowania kodów wtyczek. Możesz z nim pracować, aby stworzyć niestandardowy WordPress. Sugerujemy jednak użycie edytora kodu (IDE), takiego jak Sublime Text, Visual Studio Code lub innych podobnych edytorów.
Mają wiele narzędzi i funkcji wymaganych do zbudowania niestandardowej wtyczki. Dlatego znacznie wygodniej jest pracować z IDE, ponieważ będą one znacznie lepsze niż korzystanie z edytora kodu WP.
- Podstawowa wiedza na temat rozwoju WP.
Aby stworzyć niestandardową wtyczkę WordPress, użyjemy haków WP, funkcji PHP i zdefiniujemy własne funkcje. Dlatego zalecamy kontynuowanie tego samouczka tylko wtedy, gdy masz podstawową wiedzę na temat programowania WordPress. W przeciwnym razie samodzielne opracowanie niestandardowej wtyczki może być bardzo trudne.
Oto niektóre z podstawowych wymagań i zasobów potrzebnych do stworzenia niestandardowej wtyczki. Upewnij się, że wszystkie te wymagania są spełnione, zanim przejdziemy do samouczka.
2. Utwórz plik główny dla niestandardowej wtyczki WordPress
Pierwszym krokiem do stworzenia niestandardowej wtyczki WordPress jest utworzenie głównego pliku wtyczki. W rzeczywistości do utworzenia wtyczki wymagany jest tylko jeden plik główny. Musi mieć skomentowany blok z nazwą wtyczki.
Jest to jedyna wartość wymagana przez WP, aby mógł rozpoznać, że jest to wtyczka. Aby jednak postępować zgodnie z dobrymi praktykami i uniknąć problemów, musimy wprowadzić tutaj kilka innych informacji.
Zacznijmy więc nad tym pracować i stwórzmy ten plik.
Otwórz folder publiczny localhost i przejdź do instalacji WP, nad którą będziesz pracować. Następnie przejdź do folderu „ wp-content/plugins ”, a zobaczysz tam wszystkie zainstalowane wtyczki
Po prostu dodamy tutaj nasz nowy niestandardowy plik wtyczki.
Utwórz nowy folder w folderze wp-content/plugins instalacji WP. Aby ułatwić zrozumienie, w tym samouczku nazwaliśmy wtyczkę QuadLayers_custom_products .
Wewnątrz tego folderu będą zlokalizowane wszystkie pliki wtyczek. Stwórzmy więc nasz główny plik bezpośrednio w folderze, który właśnie utworzyliśmy. Powinien być w formacie pliku .php
To główny plik, który nazwaliśmy QuadLayers_cp.php , gdzie wszystko się zaczyna. To jest brama wtyczki. Możesz użyć edytora kodu, aby utworzyć plik, ale upewnij się, że ma rozszerzenie PHP i jest poprawnie sformatowany jako plik PHP.
Skopiuj i wklej ten kod do pliku:
<?php
/**
* @link https://quadlayers.com/
* @od 0.0.1
* @package QuadLayers Produkty niestandardowe
* Nazwa wtyczki: produkty niestandardowe QuadLayers
* URI wtyczki: https://quadlayers.com/
* Opis: Dostosuj pojedynczą stronę produktu, usuwając elementy
* Wersja: 0.0.1
* Autor: QuadLayers
* Domena tekstowa: qlcp
*/
if(!defined('ABSPATH')){die('-1');}
funkcja start() {
if(is_admin()==true){
wymagają plugin_dir_path( __FILE__ ).'includes/Backend/QuadLayers-backend-init.php';
}
wymagają plugin_dir_path( __FILE__ ).'includes/Frontend/QuadLayers-frontend-init.php';
}
funkcja runit() {
add_action('init','start');
}
Uruchom();
Jak widać, po prostu wywołujemy tutaj dwa kolejne pliki: QuadLayers-frontend-init.php i QuadLayers-backend-init.php . Oczywiście jeden będzie działał odpowiednio na froncie, a drugi na zapleczu. Możesz to jasno wywnioskować z ich nazw plików.
Spośród nich możemy zapewnić, że plik zaplecza będzie działał tylko na zapleczu, ponieważ używamy warunkowego z funkcją is_admin() . Oznacza to, że zostanie uruchomiony tylko wtedy, gdy administrator będzie na pulpicie administratora WP.
W tej chwili będziesz mieć błędy na swojej stronie, ponieważ zarówno pliki frontendowe, jak i backendowe jeszcze nie istnieją. Więc chodźmy dalej i stwórzmy je.
Utwórz nowy folder w katalogu wtyczek o nazwie includes . Następnie dodaj do niego jeszcze dwa foldery: backend i frontend .
Aby pozbyć się błędów błędnej ścieżki, utwórz dwa puste pliki, każdy w każdym z tych folderów: QuadLayers-backend-init.php w folderze backend i QuadLayers-frontend-init.php w folderze frontend.
To byłaby nasza ostateczna struktura pliku wtyczki:
QuadLayers_custom_products
__QuadLayers_cp.php
__zawiera
__Zaplecze
__QuadLayers-backend-init.php
__Front
__QuadLayers-frontend-init.php3. Opcje zaplecza
Po dodaniu głównego pliku możemy zacząć dodawać opcje zaplecza wtyczki. Tutaj utworzymy zakładkę menu wtyczki na pulpicie administratora WP. Umożliwi to użytkownikom wybór opcji ukrywania lub wyświetlania elementów na interfejsie użytkownika.
W tej demonstracji użyjemy interfejsu API ustawień dostarczonego przez WP. Nie martw się, jeśli jeszcze tego nie rozumiesz, ponieważ nie jest to trudne do nauczenia i istnieje wiele dokumentacji na ten temat.
Jeśli chcesz dowiedzieć się więcej na ten temat, oto kompletny przewodnik po API ustawień WP
Na razie po prostu skopiuj i wklej następujący kod do QuadLayers-backend-init.php
<?php
add_action('admin_init', 'QuadLayers_display_options');
add_action('admin_menu', 'QuadLAyers_cp_AdminMenu');
funkcja QuadLAyers_cp_AdminMenu(){
add_menu_page( __('Niestandardowe produkty QuadLayers', 'qlcp'), __('Niestandardowe produkty QuadLayers', 'qlcp'), 'manage_options', 'qlcp', 'QuadLayersOptionsPage' );
}
function QuadLayersOptionsPage() {
?> <formularz action="opcje.php" method="post"> <?php
settings_fields('plugin_QL_Page');
do_settings_sections('plugin_QL_Page');
prześlij_przycisk();
</form><?php
}
funkcja QuadLayers_display_options(){
register_setting('plugin_QL_Page', 'qlcp_options', 'callbackValidation');
add_settings_section(
'QuadLayers_pluginPage_section',
__('Opcje zaplecza QuadLayers', 'qlcp'),
'QuadLayersSettingsSectionCallback',
„Wtyczka_QL_Strona”
);
add_settings_field(
'QuadLayers_checkbox_field_1',
esc_attr__('Tytuł', 'qlcp'),
'QuadLayers CheckboxRender_1',
'strona_wtyczek_QL',
„QuadLayers_pluginPage_section”
);
add_settings_field(
'QuadLayers_checkbox_field_2',
esc_attr__('Ilość', 'qlcp'),
'QuadLayers CheckboxRender_2',
'strona_wtyczek_QL',
„QuadLayers_pluginPage_section”
);
add_settings_field(
'QuadLayers_checkbox_field_3',
esc_attr__('SKU', 'qlcp'),
'QuadLayers CheckboxRender_3',
'strona_wtyczek_QL',
„QuadLayers_pluginPage_section”
);
add_settings_field(
'QuadLayers_checkbox_field_4',
esc_attr__('Meta', 'qlcp'),
'QuadLayers CheckboxRender_4',
'strona_wtyczek_QL',
„QuadLayers_pluginPage_section”
);
add_settings_field(
'QuadLayers_checkbox_field_5',
esc_attr__('Zakładka Opis', 'qlcp'),
'QuadLayers CheckboxRender_5',
'strona_wtyczek_QL',
„QuadLayers_pluginPage_section”
);
add_settings_field(
'QuadLayers_checkbox_field_6',
esc_attr__('Cena', 'qlcp'),
'QuadLayers CheckboxRender_6',
'strona_wtyczek_QL',
„QuadLayers_pluginPage_section”
);
}
function QuadLayersSettingsSectionCallback(){
echo wp_kses_post('Strona ustawień niestandardowej wtyczki QuadLAyers');
}
funkcja QuadLayersCheckboxRender_1(){
$options = get_option('qlcp_options');
?>
<input name="qlcp_options[QuadLayers_checkbox_field_1]" type="pole wyboru" />
zaznaczone <?php } ?>wartość = "1">
}
function QuadLayersPole wyboruRender_2(){
$options = get_option('qlcp_options');
?>
<input name="qlcp_options[QuadLayers_checkbox_field_2]" type="pole wyboru" />
zaznaczone <?php } ?>wartość = "1">
}
function Pole wyboru QuadLayersRender_3(){
$options = get_option('qlcp_options');
?>
<input name="qlcp_options[QuadLayers_checkbox_field_3]" type="pole wyboru" />
zaznaczone <?php } ?>wartość = "1">
}
function Pole wyboru QuadLayersRender_4(){
$options = get_option('qlcp_options');
?>
<input name="qlcp_options[QuadLayers_checkbox_field_4]" type="pole wyboru" />
zaznaczone <?php } ?>wartość = "1">
}
function Pole wyboru QuadLayersRender_5(){
$options = get_option('qlcp_options');
?>
<input name="qlcp_options[QuadLayers_checkbox_field_5]" type="pole wyboru" />
zaznaczone <?php } ?>wartość = "1">
}
function QuadLayersPole wyboruRender_6(){
$options = get_option('qlcp_options');
?>
<input name="qlcp_options[QuadLayers_checkbox_field_6]" type="pole wyboru" />
zaznaczone <?php } ?>wartość = "1">
}
Teraz ponownie załaduj ekran zaplecza lub aktywuj wtyczkę, a zobaczysz nową kartę na pasku bocznym menu pulpitu nawigacyjnego.
Interfejs API ustawień WP będzie przechowywać tablicę ze wszystkimi tymi opcjami w tabeli bazy danych wp_options . Możesz to sprawdzić, otwierając PHPMyAdmin na lokalnym hoście i przeszukując go na stole.
Ponieważ są to nowo utworzone dane, należy je znaleźć na końcu tabeli
Oczywiście tablica qlcp_options jest pusta w bazie danych na powyższym zrzucie ekranu. Dzieje się tak, ponieważ wszystkie pola wyboru są w tej chwili niezaznaczone. Możesz spróbować sprawdzić niektóre z nich i wrócić do PHPMyAdmin, aby zobaczyć, jak API ustawień WP przechowuje dane.
Teraz, gdy możemy przechowywać tablicę opcji w bazie danych, musimy pobrać te opcje i użyć ich w interfejsie użytkownika. Te opcje pozwolą użytkownikom ukryć lub wyświetlić różne elementy Twojej witryny.
4. Opcje frontendu
Aby dodać opcje frontendu, po prostu skopiuj i wklej następujący kod do QuadLayers-frontend-init.php .
Spowoduje to pobranie danych z bazy danych, które były przechowywane przez plik zaplecza w postaci tablicy.
Następnie ukryje określone elementy strony produktu, w oparciu o to, które opcje są prawdziwe w tablicy options.
<?php
$options = get_option('qlcp_options');
if(!is_string($opcje)):
// Tytuł
if(isset($options['QuadLayers_checkbox_field_1'])){
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
}
// Ilość
if(isset($options['QuadLayers_checkbox_field_2'])){
add_filter( 'woocommerce_is_s_sold_indywidualnie',
funkcja ( $zwrot, $produkt ) {
zwróć prawdę;
}, 10, 2
);
}
// SKU
if(isset($options['QuadLayers_checkbox_field_3'])){
add_filter( 'wc_product_sku_enabled',
funkcja ( $włączona ) {
zwróć $włączone;
}
);
}
// Meta
if(isset($options['QuadLayers_checkbox_field_4'])){
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
}
// Zakładka Opis
if(isset($options['QuadLayers_checkbox_field_5'])){
add_filter( 'woocommerce_product_tabs',
funkcja ( $ tabulatory ) {
unset( $tabs['opis'] );
return $tabs;
}, 11
);
}
// Cena £
if(isset($options['QuadLayers_checkbox_field_6'])){
add_filter( 'woocommerce_get_price_html',
funkcja ($cena){
zwrócić ;
}
);
}
endif;
Zamykamy cały kod w if(is_string($options)) . W związku z tym możemy sprawdzić, czy nie ma zaznaczonych pól wyboru, w takim przypadku wartością bazy danych będzie ciąg znaków. Wtedy w ogóle nie musimy uruchamiać tego kodu.
Pamiętaj też, że używamy funkcji anonimowych. Działa dokładnie tak samo, jak z nazwanymi funkcjami. Ale właśnie stworzyliśmy krótszy kod tego przyjaznego dla początkujących przewodnika.
Tak więc, jeśli w bazie danych są przechowywane jakieś wartości, każda z funkcji tego kodu usunie określony element w zależności od określonego indeksu tablicy bazy danych, która jest obecna.
Dla Ciebie, jako początkującego, ważne jest, aby zrozumieć, w jaki sposób wchodzimy w interakcję z bazą danych. Nasze dwa pliki współdziałają z nim, ale te pliki nie są w żaden sposób między nimi połączone. Możesz nawet usunąć jeden plik, a drugi nadal będzie działał, ponieważ baza danych nadal będzie zawierała wymagane wartości.
I to wszystko. W tym momencie powinieneś być w stanie stworzyć niestandardową wtyczkę WordPress, aby wybrać elementy do ukrycia lub wyświetlenia na stronie produktu.
Zaplecze
Frontend
Wniosek
To jest nasz przewodnik, jak utworzyć niestandardową wtyczkę WordPress. Niestandardowe wtyczki są bardzo pomocne, jeśli chcesz mieć bardzo specyficzne funkcje dla swojej witryny i nie chcesz zaśmiecać witryny przytłaczającymi funkcjami dedykowanych wtyczek WP.
Podsumowując, oto główne kroki tworzenia niestandardowej wtyczki:
- Utwórz główny plik wtyczki
- Dodaj opcje zaplecza
- Dodaj opcje interfejsu
Sam plik głównej wtyczki powinien zawierać pliki backendu i frontendu dla wtyczki niestandardowej. Następnie możesz dalej dodać opcje zaplecza wtyczki, a następnie opcje jej interfejsu. Stworzyliśmy niestandardową wtyczkę do ukrywania elementów strony produktu. Ale możesz dalej modyfikować te pliki, aby utworzyć wtyczkę z określonymi funkcjami, których potrzebujesz.
Niemniej jednak, jeśli nadal chcesz korzystać z dedykowanej wtyczki, możesz to zrobić również. Ale w przypadku wtyczki płatnej, musisz zainstalować wtyczkę ręcznie. Możesz nawet użyć wtyczek, takich jak WooCommerce Direct Checkout i WooCommerce Checkout Manager, aby ukryć elementy na innych stronach, takich jak strona kasy.
Tymczasem oto kilka naszych postów, które mogą Cię zainteresować:
- Najlepsze wtyczki do kasy WooCommerce
- Jak utworzyć łącze WooCommerce Direct Checkout
- Najlepsze wtyczki do autouzupełniania zamówień WooCommerce
Mamy nadzieję, że możesz teraz opracować niestandardową wtyczkę w WooCommerce bez żadnych problemów. Podziel się z nami swoim doświadczeniem w komentarzach.