WP plugin (2) – zachęta do zostawienia komentarza…

Mając już wyobrażenie przeniesione do kodu, działające (jakoś), pora zastanowić się jak przenieść je do WordPressa i jak wykonać możliwość ustawień, kolorów, czasów, treści etc.

Zaczniemy od przerzucenia kodu do pluginu PHP.

WordPressowe pluginy działają w ten sposób, że kod zapisany w PHP, umieszczamy w folderze i dalej w:

/wp-content/plugins

Folder i plik PHP będą miały jednakową nazwę – ‚wiks_comment_encourage’ i ‚wiks_comment_encourage.php’. Znajdą się tam również podfoldery ‚img’, ‚css’ i ‚js’ z -odpowiednio – plikami obrazów, stylów i skryptów.
Możemy je umieścić przy pomocy FTP.
Plik php musi mieć nagłówek, który spowoduje rozpoznanie go jako pluginu. Np. taką:

/*
    Plugin Name: WikS-comment encourage
    Plugin URI: http://blog.wiks.eu/wp-plugin-zacheta-do-zostawienia-komentarza/
    Description: Wtyka dodaje ikony socjali do każdego postu w głównym widoku, oraz jednorazowo wyświetla zachętę-info do pozostawienia komentarza
    Version: 1.0
    Author: WikS.eu
    Author URI: http://wiks.eu
    License: GPLv3
    License URI: http://www.gnu.org/licenses/gpl-3.0.html
 */

treść nagłówka tworzy opis wtyczki:

 

Foldery i pliki pluginu w WordPressie:

 

…co dalej w PHP?

class WiksPopup {
    
//    public $options;    
    
    /** treść dodawana przed końcem strony
     * 
     */
    public function wikseu_popup_content() {

        $dir_img = plugins_url( 'img/', __FILE__ );
        $dir_js = plugins_url( 'js/', __FILE__ );
        $dir_css = plugins_url( 'css/', __FILE__ );

        $wikseu_popup_dev_mode = true; // tryb roboczy, m.in nie reaguje na zapisane cookie

Tworzę klasę WiksPopup, definiuje adresy katalogów umieszczonych we wtyczce względem __FILE__ oraz -na potrzeby produkcyjne ustawiam dev = true.

…komentarz mówi o treści dodawanej przed końcem strony. WordPress oferuje system tzw. zaczepów – hooks, które umożliwiają wykonywanie fragmentów swojego kodu w zdefiniowanych okolicznościach. Nas interesuje koniec strony, znaleziony zaczep to ‚wp_footer’, zaś sposób dodania kodu do niego to:

add_action( 'wp_footer', array('WiksPopup', 'wikseu_popup_content') );

wewnątrz add_action mamy nazwę zaczepu: ‚wp_footer’ oraz tablicę z dwoma elementami – nazwą utworzonej klasy i metody.

Znaną wcześniej treść HTML wstawiamy jako PHP:

echo '
<!-- ======================== WikS.eu -Plum ===================================== -->
<div id="wikseu_popup"> <!-- div, który zniszczymy po wszystkim -->
   <div id="wikseu_popup_outer">
       <div id="wikseu_popup_middle">
           <div id="wikseu_popup_inner">
               <div id="wikseu_popup_popup"> <!-- div po którym biegają ikonki -->
[...]

                <!-- socjal ikonki -->';
 foreach ($options['we_checkbox_x'] as $one_file_ico ) {
     echo '<img class="wikseu_popup_icon" src="'.$dir_img.'/'.$one_file_ico.'">';
 }
 echo '     </div>

[...]

<script>';
echo "var wikseu_popup_is_admin = ";
if ( ! is_admin() ) {
    echo "true;";
}else{
    echo "false;";
}
echo "var wikseu_popup_dev_mode = "; // czy tryb roboczy
if ($wikseu_popup_dev_mode === true) {
    echo "true;"; // tryb roboczy, m.in nie reaguje na zapisane cookie    
}else{
    echo "false;"; // tryb normalny
}

[...]

wp_enqueue_script( 'wikseu_popup', $dir_js . 'wikseu_popup.js', array('jquery'), null, true);
wp_enqueue_style( 'wikseu_popup', $dir_css . 'wikseu_popup.css' );


…fragment w którym wrzucaliśmy ikonki socjal mediów zmieniamy na pokazany wyżej -pozwoli to na lepsze operowanie ikonami – ich nazwy będą pobierane z utworzonej tablicy, zaś ta będzie definiowana w ustawieniach…

Będziemy ponadto sprawdzać, czy zalogowany użytkownik jest adminem, a także przenosić informację o trybie DEV/produkcyjnym z PHP do JavaScript.

Ostatni fragment to dodanie skryptu oraz arkusza stylów w akceptowalny przez WordPress sposób, przy skrypcie zaznaczamy, że wymaga ‚jQuery’ do działania.

Właściwie jeszcze jedną niezbędną w tym wypadku koniecznością okazała się zmiana wszystkich jQuerowych prefixów ‚$’ na pełne ‚jquery’ w kodzie. Taka uroda WordPressa.

 

dalej…

Loading Disqus Comments ...
Loading Facebook Comments ...

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *