Jakiś czas temu przedstawiłem Wam jak w prosty sposób można dodać własny kod do WordPressa – albo za pomocą własnej wtyczki, albo korzystając z pliku functions.php (pamiętajcie o motywach potomnych/child themes).
Dziś powrócimy do tego tematu – dostałem prośbę od znajomego, o przekształcenie „pewnego rozwiązania” w działającą wtyczkę do WordPressa. Zadanie postanowiłem przyjąć, bo będzie z tego zapewne dla wielu z Was przydatny wpis…
Spis treści w artykule
WordPress: Tworzymy własną wtyczkę
Znajomy szukał prostego „wyskakującego paska”, na którym umieści jakiś tekst, zachęcający do działania. Rozwiązań tego typu jest już gotowych masa – jak choćby Icegram, który opisywałem wczoraj, a który obecnie zachęca Was do zapisania się do naszego Newslettera (serio – zero SPAMu, same konkrety, tak więc serdecznie polecam :)).
Ale tu „obiektem westchnień” stał się BugMeBar, którego kod można znaleźć na GitHubie, albo – jak wykazało moje małe śledztwo – w formie gotowej wtyczki do WordPressa, którą za jedyne 12$ możecie kupić na platformie CodeCanyon.
Tworzymy stryktury strukturę
Zacząłem od utworzenia katalogu „webinsider-wp-bugmebar”, w którym to umieściłem plik „webinsider-wp-bugmebar.php”, w którym znajdzie się kod naszej wtyczki.
Oprócz tego utworzyłem wewnątrz jeszcze – dla porządku – katalog „css” i „js”, w którym znajdą się niezbędne pliki pobrane ze strony projektu.
Po rozpakowaniu pliku „BugMeBar-master.zip” kopiujemy plik „bugme.css” do katalogu „css” nasze wtyczki, oraz pliki „jquery.bugme.js” i „jquery.cookie.js” do katalogu „js”.
Całość wygląda tak:
webinsider-wp-bugmebar:
-> katalog "css"
-> -> bugme.css
-> katalog "js"
-> -> jquery.bugme.js
-> -> jquery.cookie.js
-> webinsider-wp-bugmebar.phpKod wtyczki
Gdy strukturę mamy już za sobą, możemy przystąpić do wyborów do przygotowania kodu naszej wtyczki. Podstawowe zasady znajdziecie w tym wpisie, więc nie będę ich tutaj ponownie wyjaśniał.
<?php
/*
* Plugin Name: Webinsider BugMeBar
* Plugin URI:
* Description: Add simple "info bar" :-)
* Author: Patryk z Webinsider
* Author URI: https://webinsider.pl
* Version: 1.0.1
*/
if ( ! defined( 'ABSPATH' ) ) exit;
if ( !function_exists("webinsider_wp_bugmebar") ) {
function pryc_wp_bugmebar() {
echo '<script src="http://code.jquery.com/jquery-2.1.4.js"></script>';
echo '<script src="' . plugins_url( 'js/jquery.cookie.js', __FILE__ ) . '" ></script> ';
echo '<script src="' . plugins_url( 'js/jquery.bugme.js', __FILE__ ) . '" ></script> ';
echo '<link rel="stylesheet" href="' . plugins_url( 'css/bugme.css', __FILE__ ) . '" type="text/css" media="all" > ';
?>
<script>
jQuery(document).ready(function () {
jQuery('body').bugme({
target: ".entry-content", // Punkt zaczepienia, klasa lub ID DIVa (nie ma znaczenia gdy "fixed: true")
message: "A to jest nasz BugMeBar", // Wiadomość (można wstawić obrazki itp)
align: "center", // Pozycja wiaodmości (treści): left|right|center|justify
close: true, // Przycisk zamykania: true|false
closeText: "X", // Tekst przycisku zamykania
closeAlign: "right", // Pozycja przycisku zamykania: left|right
remember: true, // Czy generować ciasteczko z info o zamknięciu: true|false
expireIn: 1, // A jak tak, to jak długo ma żyć ciasteczko (w dniach)
cookieName: "bugmeb_wipl", // Nazwa ciasteczka
colours: false, // Czy tło ma dynamicznie zmieniać kolor: true|false (tylko przeglądarki obsługujące CSS3)
animate: true, // Animacja pojawiania sie i znikania: true|false (tylko przeglądarki obsługujące CSS3)
fixed: true, // Czy przyczepić pasek na górze strony: true|false (ignoruje wtedy "target")
fixedSpacer: false, // Dodatkowa przestrzeń gdy "fixed true": true|false
zindex: 999 // Sterowanie wartością Z-Index
});
});
</script>
<?php
}
}
add_action('wp_head', 'webinsider_wp_bugmebar');
?>Na 4 elementy/informacje chciałem zwrócić Waszą uwagę:
Dodanie kodu do nagłówka strony (head)
W naszym przypadku cały kod wtyczki dodajemy do nagłówka <head> strony, dlatego posługujemy się takim wywołaniem:
add_action('wp_head', 'webinsider_wp_bugmebar');Problem z jQurey
Nie wiem jak będzie to wyglądało u nas, ale u mnie do poprawnego działania strony musiałem skasować linijkę:
echo '<script src="http://code.jquery.com/jquery-2.1.4.js"></script>';Po prostu generowało to jakiś konflikt, a bez niej skrypt działa prawidłowo – po prostu jQuery jest już wczytywane przy innej okazji…
Parametry
Przy każdej z opcji umieściłem komentarz z informacją do czego służy, tak więc nie powinniście mieść większych problemów z ustawieniem wtyczki pod siebie.
Target or Fixed
Pozycję naszego paska informacyjnego ustawiamy za pomocą pozycji „target”, gdzie należy wpisać element zakotwiczenia, może to być np. klasa lub ID wybranego DIVa.
Nie ma to znaczenia, gdy chcecie wyświetlić pasek na samej górze – wtedy należy parametrowi „fixed” nadać wartośc „true”.
Wygląd BugMeBara
Wygląd, czyli kolor tła, wielkość liter itp. możecie zmieniać edytując plik „bugme.css” znajdujący się w katalogu „css”.
Działanie wtyczki
W naszym przypadku wtyczka szuka elementu „.entry-content”, gdzie wyświetla pasek z napisem:
A to jest nasz BugMeBar
Wy możecie ustawić innym element zaczepienia – wpisując zamiast „.entry-content” inną klasę, lub ID wybranego DIVa, ew korzystając z opcji „fixed:true”, co spowoduje wyświetlenie paska na samej górze strony, niezależnie od parametry wpisanego w pozycji „target”.
Ustawienia w panelu administracyjnym WordPressa
Jeśli teraz liczycie, że kolejnym krokiem tego poradnika będzie przygotowanie panelu z opcjami, tak by można było ustawieniami zarządzać bezpośrednio z wygodnego menu w panelu zarządzania stroną, mam dla Was być może smutną wiadomość – nie tym razem…
I to z co najmniej 2 powodów:
Rośnie poziom skomplikowania
Znacznie podniosło by to poziom skomplikowania kodu takiej wtyczki, bo trzeba by dodać elementy związane z przygotowaniem interfejsu, do tego dochodzi zapisywanie i odczytywanie wartości z bazy danych…
A nie to jest celem celem tego wisu – ten wpis ma Wam pokazać w praktyce, jak można wykorzystać w informacje związane z dodawaniem własnego kodu do WordPressa.
Na cele własne/prywatne – powinna Wam wystarczyć możliwość zmiany ustawień/parametrów naszego paska informacyjnego poprzez edycję plików.
BugMeBar – A simple little notification plugin
Jeśli jednak koniecznie potrzebujecie graficznego interfejsu – zachęcam do zakupu wtyczki przygotowanej przez autora skryptu który wykorzystaliśmy w tym przykładzie.
Gotowa wtyczka – z interfejsem graficznym – kosztuje tylko 12$ na CodeCanyon, a na pewno każdy dolar do Was wróci, choćby w postaci przyszłych aktualizacji, do których Wasz zakup na pewno autora zachęci :-)
Dodam może jeszcze, że choć na stronie znajomego uruchomiliśmy naszej roboty wtyczkę, to był na tyle z niej zadowolony, że postanowił wspomóc pierwotnego autora kupując wersję z CodeCanyon – i to mimo, że raczej nie planuje modyfikować parametrów jakie mu ustawiłem…
Pasjonat nowych technologii - od sprzętu po oprogramowanie, od serwerów po smartfony i rozwiązania IoT. Potencjalnie kiepski bloger, bo nie robi zdjęć "talerza" zanim zacznie jeść.
Dumny przyjaciel swoich psów :-)
- Wakacje składkowe ZUS a zawieszenie działalności gospodarczej, czyli uważaj, bo być może nie będziesz mógł skorzystać (w 2024) - 1970-01-01
- Przykładowy kalkulator wyceny usługi druku 3D, czyli nie tylko materiał się liczy - 1970-01-01
- Home Assistant 2024.10, czyli nowa karta „nagłówek” i niedziałający TTS w ramach usługi Google Cloud - 1970-01-01
