Tworzenie wtyczek WordPress – #4 Shortcode i ustawienia

W czwartej części kursu “Tworzenie wtyczek WordPress” dodamy nowy shortcode. Oprócz tego utworzymy dwie nowe opcje – kolor tekstu i ilość wyświetlanych wydarzeń.

Dodanie Shortcode

Shortcode to specjalny skrót w WordPress, który pozwala na przypisanie określonego kodu (np. HTML) do dowolnego skrótu tekstowego. Następnie skrót może zostać użyty wewnątrz strony, posta itp.

Dodanie shortcode rozpoczniemy od utworzenia nowego pliku wewnątrz katalogu includes. Nazwiemy go shortcodes.php. Podepnijmy go do głównego pliku dodając w devcorner-events.php:

include_once( plugin_dir_path( __FILE__ ) . 'includes/shortcodes.php');

Wewnątrz shortcodes.php umieścimy ten prosty kod:

<?php

function devcorner_events_shortcode() {
  devcorner_events_widget_content();
}

add_shortcode('devcorner_events', 'devcorner_events_shortcode');

devcorner_events_shortcode() zawiera funkcję, którą utworzyliśmy w poprzedniej części  – devcorner_events_widget_content(). Znajduje się ona w pliku functions.php i wyświetla wydarzenia w widgecie.

add_shortcode() rejestruje skrót. Przyjmuje dwa parametry: nazwę skrótu i funkcję wyświetlającą jego zawartość.

Sprawdźmy teraz działanie skrótu. Utwórz nową stronę o dowolnym tytule. W treści strony wpisz [devcorner_events]. W motywie Shapely możesz ustawić szablon Full width, który usunie niepotrzebny nam sidebar.

Przejdź teraz na tę stronę:

Po lewej stronie wyświetla się shortcode, który utworzyliśmy. Korzysta on z tej samej funkcji (devcorner_events_widget_content()), z której korzysta widget.

Moglibyśmy zaprojektować zupełnie inną strukturę skrótu niż widgetu, ale nie będziemy tego robić. Zachowamy obecny wygląd shortcode z jedną różnicą. Dodamy krótki opis wydarzenia.

Opis będziemy pobierać z pola Excerpt (w polskiej wersji WordPressa Zajawka). Jeśli wcześniej nie dodałeś nic do tego pola, to możesz to teraz zrobić.

Teraz musimy pobrać i wyświetlić opis. Tworzenie nowej funkcji, która różniłaby się od poprzedniej tylko jednym elementem, nie miałoby sensu. Dlatego zmodyfikujemy tylko funkcję devcorner_events_widget_content()  (functions.php).

function devcorner_events_widget_content($excerpt = false) {

   $events_array = array();
   $loop = new WP_Query( array( 'post_type' => 'events', 'posts_per_page' => -1 ) );
   while ( $loop->have_posts() ) : $loop->the_post();
  	$id = get_the_ID();
  	$date = strtotime(get_post_meta($id, "_date", true));
  	$location = get_post_meta($id, "_location", true);
  	$time = get_post_meta($id, "_time", true);

        $day = date('d', $date);
  	$month = date('M', $date);

  	?>
  	<a href="<?php the_permalink(); ?>">
  	<div class="devcorner-events-widget">
  		<div class="devcorner-events-date"><?php echo $day; ?><span><?php echo $month; ?></span></div>
  		<div class="devcorner-events-content">
  			<span class="devcorner-events-event-title"><?php the_title(); ?></span>
                        <?php
                           if($excerpt) {
                             the_excerpt();
                           }
                        ?>
  			<span class="devcorner-events-hours"><?php echo $time; ?></span>
  			<span class="devcorner-events-location"><?php echo $location; ?></span>
  		</div>
  		</div>
  		</a>
  		<?php

   endwhile; wp_reset_query();
}

W funkcji zmieniamy trzy rzeczy:

1. Dodajemy parametr $excerpt ustawiony domyślnie na false.
2. Sprawdzamy czy $excerpt jest ustawiony na true.
3. Jeśli jest, to wyświetlamy opis (funkcja the_excerpt()).

W skrócie: jeśli jako parametr funkcji devcorner_events_widget_content() podamy true, to opis zostanie wyświetlony. Nazwa funkcji teraz nie do końca odzwierciedla jej przeznaczenie. Możesz ją zmienić na coś bardziej ogólnego jeśli chcesz.

Przejdźmy teraz do pliku shortcodes.php i dodajmy parametr:

devcorner_events_widget_content(true);

Odśwież teraz stronę ze skrótem:

Shortcode działa już poprawnie. Musimy jeszcze poprawić margines w opisie wydarzenia. Dodajmy nowy arkusz stylów. W katalogu public/css utwórzmy plik shortcode-style.css.

Wewnątrz funkcji devcorner_events_load_styles() (functions.php) dodajmy linię:

wp_enqueue_style('devcorner_events_shortcode_style', plugins_url('/devcorner-events/public/css/shortcode-style.css'));

Wewnątrz shortcode-style.css dodajmy prostą regułę:

.devcorner-events-widget .devcorner-events-content p {
  margin: 5px 0 10px;
}

Dodatkowe ustawienia

W tej części kursu dodamy dwie nowe opcje. Po pierwsze – damy użytkownikom możliwość zmiany koloru tekstu. Po drugie – wyobraź sobie, że user doda 30 wydarzeń. W tej chwili wyświetlą się wszystkie i nasza sekcja znacznie zwiększy wysokość strony. Aby temu zapobiec, umożliwimy ustawienie ilości wyświetlanych wydarzeń.

Kolor tekstu

Przejdźmy teraz do pliku odpowiedzialnego za generowanie ustawień (menu.php). Wewnątrz tabeli .devcorner-events-widget-styles dodajmy nowy wiersz:

<tr>
	<th scope="row">
            <label for="devcorner_events_text_color">Kolor tekstu</label>
	</th>

	<th scope="row">
            <input name="devcorner_events_text_color" type="text" value="<?php echo get_option('devcorner_events_text_color'); ?>">
	</th>
</tr>

Ten kod wygeneruje nowe pole. Teraz zaktualizujmy tą wartość. Pod linią:

update_option('devcorner_events_hover', $_REQUEST['devcorner_events_hover']);

Dodaj linię:

update_option('devcorner_events_text_color', $_REQUEST['devcorner_events_text_color']);

Ta linia zaktualizuje wartość pola Kolor tekstu po zapisaniu ustawień. Wpisz teraz przykładowy kolor i zapisz.

Wartość została poprawnie zapisana. Możemy teraz wygenerować regułę CSS. W funkcji devcorner_events_load_styles() (functions.php) dopiszmy regułę do zmiennej $custom_css:

$custom_css .= "
    .devcorner-events-widget, body .devcorner-events-widget .devcorner-events-content p {
        color: ".get_option('devcorner_events_text_color').";
    }
";

Odświeżmy teraz stronę z shortcodem.

Ilość wydarzeń

Drugim ustawieniem, które dodamy, będzie ilość wyświetlanych wydarzeń. W pliku ustawień (menu.php) powyżej diva .devcorner-events-options-widget-styles dodajmy poniższy kod:

<div class="devcorner-events-options-properties postbox">
  <h3>Właściwości wtyczki</h3>
  <p>Tutaj możesz zmodyfikować właściwości wtyczki.</p>

  <table class="devcorner-events-plugin-properties">
      <tbody>
          <tr>
              <th scope="row">
                 <label for="devcorner_events_amount">Ilość wydarzeń</label>
              </th>
               <th scope="row">
                 <input type="number" name="devcorner_events_amount" value="<?php echo get_option('devcorner_events_amount'); ?>">
               </th>
          </tr>
     </tbody>
  </table>
</div>

Jak widzisz kolejne ustawienia różnią się głównie atrybutem name. Dodajemy teraz aktualizację wartości:

update_option('devcorner_events_amount', $_REQUEST['devcorner_events_amount']);

Przejdźmy teraz do funkcji devcorner_events_widget_content() (functions.php). Zmienimy parametr posts_per_page w funkcji WP_Query():

$loop = new WP_Query( array( 'post_type' => 'events', 'posts_per_page' => get_option('devcorner_events_amount') ) );

Numer, który wpiszemy w ustawieniach zostanie wstawiony jako wartość parametru posts_per_page. Przetestujmy działanie wpisując w polu Ilość wydarzeń przykładową liczbę:

Odświeżmy stronę:

Ilość wyświetlanych wydarzeń odpowiada ustawieniom.

Na tym skończymy tą część kursu. W kolejnym artykule z tej serii zajmiemy się tłumaczeniem pluginu i stylami w panelu administratora.

Pobierz paczkę z wtyczką >>