Aby wykorzystać w WordPressie dane z serwera pogodowego, pobierane dla tokena, należy napisać widget.

Posłużę się tutaj prostym przykładem, który oczywiście można dowolnie przerobić.
Przy pisaniu widgetu korzystałem z opisów na stronie: https://wpadmin.pl, tak więc po szczegóły dot budowy w części WordPressowej sugeruję zerknąć na WPadmin.

Budowany widget będzie miał dwie klasy (pobierania danych i senso-stricte widgetowy) i prosty panel ustawień, informacja prezentowana będzie w formie tekstowej (ale będą zbudowane podstawy do prezentowania jej także w formie graficznej, albo wręcz wskazań poszczególnych parametrów aktualnej temperatury), będzie także prosty panel ustawień sposobów wyświetlania.

Klasa pobierająca dane

 

W zależności od miejsca dla którego czytamy dane, zdefiniowanego posiadanym tokenem, uzyskamy dane pogodowe aktualne i prognozę (ok. 60 miejsc – głównie w Polsce) lub tylko prognozę (ok. 300 miejsc w Polsce).
Klasa pobierająca dane ma za zadanie pobrać, sprawdzić i ujednolicić je w ten sposób, aby w łatwy sposób przedstawić w widgecie.

przykładowe dane z serwera- pogoda i prognoza:

"{"w":[{"name":"\u015awinouj\u015bcie","dt":"2018-07-18 09:00:00",
         "descr_forecast":"w godz.20-... bezchmurne niebo, temp. +20...+21\u00b0C, \u0142agodny...umiarkowany wiatr (3-4B) z kierunku NW, ci\u015bnienie 1027 hPa, rozchmurzy si\u0119 do 0\/8 , wilgotno\u015b\u0107 84...91 %",
         "descr_now":"pochmurnie, temperatura +19\u00b0C, wiatr z kierunku NW 3B (ok.5m\/s), ci\u015bnienie 1011hPa, wilgotno\u015b\u0107 93% ",
         "urln":"http:\/\/pogoda.wiks.eu\/a\/18092323_GWIBC9F5.wav",
         "urlf":"http:\/\/pogoda.wiks.eu\/a\/18092323_NMIPGAX9.wav",
         "img_forecast":"http:\/\/pbs.twimg.com\/media\/DiXuBp7XcAUVk2-.png",
         "lat":"53.923","lng":"14.278",
         "windspeed":"5",
         "winddir":"320",
         "humidity":"93",
         "pressure":"1011","clouds":"75","temp":"19"}],
          
         "f":[{"name":"\u015awinouj\u015bcie","dt":"2018-07-18 09:38:58",
         "for_date":"2018-07-18",
         "forec_descr":"w godz....-16 i 20-... przelotny deszcz, temp. +18...+19\u00b0C, \u0142agodny...umiarkowany wiatr (3-4B) z kierunku N, ci\u015bnienie 1028 hPa, zachmurzenie 7\/8, wilgotno\u015b\u0107 95...100 %",
         "url":"http:\/\/pogoda.wiks.eu\/a\/18093858_BM5GPWT2.wav"},
         {"name":"\u015awinouj\u015bcie","dt":"2018-07-18 09:38:59",
         "for_date":"2018-07-19",
         "forec_descr":"w godz....-0 i 8-13 przelotny deszcz, w godz.2-7 umiarkowany deszcz, w godz.20-... bezchmurne niebo, temp. +19...+21\u00b0C, umiarkowany...do\u015b\u0107 silny wiatr (4-5B), z kierunk\u00f3w NW, N, ci\u015bnienie 1027...1029 hPa, zachmurzenie 0-8\/8, wilgotno\u015b\u0107 87...100 %",
         "url":"http:\/\/pogoda.wiks.eu\/a\/18093858_VR7SIGAO.wav"},
         {"name":"\u015awinouj\u015bcie","dt":"2018-07-18 09:38:59",
         "for_date":"2018-07-20",
         "forec_descr":"w godz....-13 bezchmurne niebo, temp. +18...+20\u00b0C, powiew...umiarkowany wiatr (1-4B), z kierunku NW, ci\u015bnienie 1027...1029 hPa, zachmurzenie 0-3\/8, wilgotno\u015b\u0107 86...96 %",
         "url":"http:\/\/pogoda.wiks.eu\/a\/18093859_ZWRU2J24.wav"},
         {"name":"\u015awinouj\u015bcie","dt":"2018-07-18 09:38:59",
         "for_date":"2018-07-21",
         "forec_descr":"w godz.2-16 bezchmurne niebo, temp. +18...+24\u00b0C, powiew...umiarkowany wiatr (1-4B), z kierunk\u00f3w E, SW, ci\u015bnienie 1021...1027 hPa, zachmurzenie 0-7\/8, wilgotno\u015b\u0107 74...99 %",
         "url":"http:\/\/pogoda.wiks.eu\/a\/18093859_L2J2U4W5.wav"}]}"

przykładowe dane z serwera- tylko prognoza:

          
"{"p":{
         "0":{"name":"Krosno Odrza\u0144skie","dt":"2018-07-17 19:30:51","for_date":"2018-07-18",
         "forec_descr":"w godz....-0 i 20-... bezchmurne niebo, temp. +17...+26\u00b0C, \u0142agodny...umiarkowany wiatr (3-4B), z kierunk\u00f3w NW, N, ci\u015bnienie 1016...1019 hPa, zachmurzenie 0-7\/8, wilgotno\u015b\u0107 50...80 %",
         "url":"http:\/\/pogoda.wiks.eu\/a\/17193051_LRQRZM4I.wav"},
         "1":{"name":"Krosno Odrza\u0144skie","dt":"2018-07-17 19:30:52","for_date":"2018-07-19",
         "forec_descr":"w godz....-0, 5-10, 14-... bezchmurne niebo, temp. +16...+26\u00b0C, \u0142agodny wiatr ( 3B ), z kierunku NW, ci\u015bnienie 1018...1020 hPa, zachmurzenie 0-6\/8, wilgotno\u015b\u0107 38...70 %",
         "url":"http:\/\/pogoda.wiks.eu\/a\/17193052_6K0U092W.wav"},
         "name":"Lulla"}}"         

Wynik działania klasy pobierająco przetwarzającej jest podobny do:

Array
(
    [type] => w
    [name] => Świnoujście
    [w] => Array
        (
            [dt] => 2018-07-18 11:30:00
            [descr] => przelotny deszcz, temperatura +19°C, wiatr z kierunku NW 3B (ok.4m/s), ciśnienie 1013hPa, wilgotność 88% 
            [descr_12h] => w godz....-16 i 20-... przelotny deszcz, temp. +18...+19°C, łagodny...umiarkowany wiatr (3-4B) z kierunku N, ciśnienie 1028 hPa, zachmurzenie 7/8, wilgotność 95...100 %
            [img] => 
            [url] => http://pogoda.wiks.eu/a/18115504_I4SCADDS.wav
            [url_12h] => http://pogoda.wiks.eu/a/18115504_ZLGTPN2S.wav
        )
    [f] => Array
        (
            [2018-07-18] => Array
                (
                    [descr] => w godz....-16 i 20-... przelotny deszcz, temp. +18...+19°C, łagodny...umiarkowany wiatr (3-4B) z kierunku N, ciśnienie 1028 hPa, zachmurzenie 7/8, wilgotność 95...100 %
                    [url] => http://pogoda.wiks.eu/a/18093858_BM5GPWT2.wav
                )
            [2018-07-19] => Array
                (
                    [descr] => w godz....-0 i 8-13 przelotny deszcz, w godz.2-7 umiarkowany deszcz, w godz.20-... bezchmurne niebo, temp. +19...+21°C, umiarkowany...dość silny wiatr (4-5B), z kierunków NW, N, ciśnienie 1027...1029 hPa, zachmurzenie 0-8/8, wilgotność 87...100 %
                    [url] => http://pogoda.wiks.eu/a/18093858_VR7SIGAO.wav
                )
            [2018-07-20] => Array
                (
                    [descr] => w godz....-13 bezchmurne niebo, temp. +18...+20°C, powiew...umiarkowany wiatr (1-4B), z kierunku NW, ciśnienie 1027...1029 hPa, zachmurzenie 0-3/8, wilgotność 86...96 %
                    [url] => http://pogoda.wiks.eu/a/18093859_ZWRU2J24.wav
                )
            [2018-07-21] => Array
                (
                    [descr] => w godz.2-16 bezchmurne niebo, temp. +18...+24°C, powiew...umiarkowany wiatr (1-4B), z kierunków E, SW, ciśnienie 1021...1027 hPa, zachmurzenie 0-7/8, wilgotność 74...99 %
                    [url] => http://pogoda.wiks.eu/a/18093859_L2J2U4W5.wav
                )
        )
    [dt] => 2018-Jul-18 09:38:59
)
-------------- lub ----------------
Array
(
    [type] => p
    [name] => Lulla
    [f] => Array
        (
            [2018-07-18] => Array
                (
                    [descr] => w godz....-0 i 20-... bezchmurne niebo, temp. +17...+26°C, łagodny...umiarkowany wiatr (3-4B), z kierunków NW, N, ciśnienie 1016...1019 hPa, zachmurzenie 0-7/8, wilgotność 50...80 %
                    [url] => http://pogoda.wiks.eu/a/17193051_LRQRZM4I.wav
                )
            [2018-07-19] => Array
                (
                    [descr] => w godz....-0, 5-10, 14-... bezchmurne niebo, temp. +16...+26°C, łagodny wiatr ( 3B ), z kierunku NW, ciśnienie 1018...1020 hPa, zachmurzenie 0-6/8, wilgotność 38...70 %
                    [url] => http://pogoda.wiks.eu/a/17193052_6K0U092W.wav
                )
        )

    [dt] => 2018-Jul-17 19:30:52
)

Klasa widgetu – zobrazowanie

Przetworzenie powyższego dla zobrazowania:

/** Wyświetlanie widgetu uzytkownikowi
 * 
 * @param type $args
 * @param type $instance
 */
public function widget($args, $instance) {

   $my_html_content = '';
   $g = new GETpogodaWiksEu();
   $vcontent = $g->get_and_validate_for_token($instance['token']);
   if($vcontent) {
      if(!empty($vcontent['name']) && !empty($vcontent['f'])) {
         $my_html_content = '<h3>'.$vcontent['name'].'</h3>';
         $lp_days = '0';
         foreach($vcontent['f'] as $key=>$value) {
            if($lp_days++ < $instance['max_days']) {
               $my_html_content .= '<h4>';
               if(!$instance['days_as_date_only'] === true) {
                  $inside_key = $key;
               }else{
                  $inside_key = $this->prittyfy_dt($key);
               }
               if($instance['allow_audio'] === true && !empty($value['url'])){
                  $img = '<img src="'.$this->url_img.'speaker50.gif'.'" 
                  style="width:20px;height:20px;">';
                  $my_html_content .= '<a href="'.$value['url'].'">'.$img.' '.$inside_key.'</a>';
               }else{
                  $my_html_content .= $inside_key;
               }
               $my_html_content .= ':</h4>';
               $my_html_content .= $value['descr'].'<br>';
            }
         }
      }
   }
   echo '<div class="widget" id="wiks_weather_content">'.$my_html_content.'</div>';
}

Zaś opcje:

/**
 * Outputs the options form on admin
 *
 * @param array $instance The widget options
 */
public function form( $instance ) {

   //ustawiamy opcje domyslne
   $my_defaults = array(
      'token' => 'for_test_cntcXBWYJDQ0H6VwanN3Zrh', // test token
      'max_days' => 3,
      'days_as_date_only' => false,
      'allow_audio' => true,
   );
   $instance = wp_parse_args( (array) $instance, $my_defaults );
   ?>
   <p>
   <!-- token -->
   <label for="<?php echo $this->get_field_id('token'); ?>"><?php _e('Token:'); ?></label>
   <input class="widefat" id="<?php echo $this->get_field_id('token'); ?>" name="<?php echo $this->get_field_name('token'); ?>" type="text" value="<?php echo esc_attr($instance['token']); ?>" />
   </p>
   <p>
   <!-- max days show -->
   <label for="<?php echo $this->get_field_id( 'max_days' ); ?>"><?php _e( 'Maksymalna liczba dni prognozy:' ); ?></label>
   <input id="<?php echo $this->get_field_id( 'max_days' ); ?>" name="<?php echo $this->get_field_name( 'max_days' ); ?>" type="text" value="<?php echo $instance['max_days']; ?>" size="3" />
   </p>
   <p>
   <!-- czy zmieniać daty na przyjazne opisy dziś jutro -->
   <input class="checkbox" type="checkbox" name="<?php echo $this->get_field_name('days_as_date_only'); ?>" id="<?php echo $this->get_field_id('days_as_date_only'); ?>" value="true" <?php checked(true, $instance['days_as_date_only']);?> />
   <label for="<?php echo $this->get_field_id('days_as_date_only'); ?>"> <?php _e( 'pokaż przyjazne opisy dni np. "dziś" zamiast "'.date('Y-m-d', time()).'"' ); ?></label><br />
   </p>
   <p>
   <!-- czy tworzyć linki do audio -->
   <input class="checkbox" type="checkbox" name="<?php echo $this->get_field_name('allow_audio'); ?>" id="<?php echo $this-
   >get_field_id('allow_audio'); ?>" value="true" <?php checked(true, $instance['allow_audio']);?> />
   <label for="<?php echo $this->get_field_id('allow_audio'); ?>"> <?php _e( 'utwórz odnośniki do audio' ); ?></label><br />
   </p>
   <?php
}

opcje prezentują się tak:

Widget zaś jest tutaj:


 

Radości!
WikS

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…