Kurs WordPress (9)

Autor: Damian Chodorek • Opublikowany: 26 grudnia 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: kursy, wordpress

Dodanie możliwości edycji szablonu.

Czy warto dodawać opcje edycji szablonu? Prawie zawsze odpowiedzą będzie: tak. Nawet jeśli robisz stronę na zamówienie, a więc jest ona uszyta na miarę, to z czasem może zmienić się logo Twojego klienta. Miłym smaczkiem będzie dla niego możliwość samodzielnego zaktualizowania szablonu.

Jeśli zamierzasz sprzedawać swój szablon, to warto pomyśleć o szerszych możliwościach edycji. W końcu trafi on do ludzi o różnych upodobaniach i na pewno docenią możliwość dostosowania szablonu, do swojego gustu i potrzeb.

W dzisiejszym artykule pokażę Ci jak pozwolić administratorowi na zmianę koloru linków na stronie. Oczywiście na podstawie tej lekcji będziesz potrafił dać możliwość edycji dowolnych CSS’ów.

Etapy

Cały proces można podzielić na 4 etapy:

  1. stworzenie i ustawienie kilku zmiennych, które zdefiniują sposób edycji szablonu,
  2. zarejestrowanie opcji w WP, aby pojawiły się w panelu administratora,
  3. dodanie i stworzenie formularza edycji,
  4. na podstawie zapisanych opcji, wstrzyknięcie odpowiedniego kodu CSS do naszego szablonu.

Kilka podstawowych zmiennych

Zanim zaczniemy drobna uwaga – kod który zaprezentuję, należy dodać w pliku functions.php, ale żeby zachować porządek, polecam zdefiniowanie sobie odrębnego pliku np. library/my_options.php, a następnie dodanie go do functions.php przy pomocy funkcji inlcude().

Cały proces tworzenia formularza edycji w panelu administracyjnym ułatwi dodanie kilku zmiennych globalnych, które będą przechowywać przydatne informacje.

$mythemename = "My Theme";
$myshortname = "mt";
$myoptions = array();

Pierwsza zmienna przechowuje nazwę naszego szablonu. Przyda się, kiedy będziemy chcieli wyświetlić ją danym miejscu, np. panelu admina. Druga zmienna to skrócona nazwa szablonu. Przyda się, aby wyróżnić dane szablonu, np. $myshortname . "link_color". Trzecia, to tablica, w której umieścimy odpowiednie ustawienia.

Kolejnym krokiem jest ustawienie kilku parametrów naszego przyszłego formularza. Zdefiniowana przez nas tablica będzie zawierać inne tablice – każda odpowiedzialna za jedną opcję. W każdej z nich muszą być zdefiniowane parametry:

  • name – nazwa opcji,
  • desc – opis oraz instrukcje użycia,
  • id – zmienna potrzebna, aby zapisywać i aktualizować opcje w bazie danych,
  • std – domyślne ustawienia,
  • type – rodzaj formularza: text, select, textarea, radio, checkbox.
  • options – tylko dla typu select, radio i checkbox, tablica dostępnych wyborów.

Poniżej definicja parametrów dla opcji koloru linków.

function mytheme_options() {
  global $mythemename, $myshortname, $myoptions;
  $myoptions = array( array("name" => __('Kolor linków', 'mytheme'),
    "desc" => __('Zmień kolor używając szesnastkowego zapisu, np. FF00AA', 'mytheme'),
    "id" => "my_link_color",
    "std" => "000000",
    "type" => "text"),
  );
}

add_action('init', 'mytheme_options');

Zarejestrowanie opcji w panelu admina

Przyjrzyj się poniższej funkcji. Zauważ, że if oraz else nie wykona się od razu, a dopiero po wybraniu odpowiedniej opcji w menu admina. Za tę funkcjonalność służy ostatnia linijka w funkcji.

function mytheme_add_admin() {
  global $mythemename, $myshortname, $myoptions;
  if ( $_GET['page'] == basename(__FILE__) ) {
    if ( 'save' == $_REQUEST['action'] ) {
      check_admin_referer('mytheme-save');
      // zapisanie opcji
      foreach ($myoptions as $value) {
        if( isset( $_REQUEST[ $value['id'] ] ) ) {
          update_option( $value['id'], $_REQUEST[ $value['id'] ] );
        } else {
          delete_option( $value['id'] );
        }
      }
      header("Location: themes.php?page=options.php&saved=true");
      die;
    } else if ( 'reset' == $_REQUEST['action'] ) {
      check_admin_referer('mytheme-reset');
      // skasowanie opcji
      foreach ($myoptions as $value) {
        delete_option( $value['id'] ); 
      }
      header("Location: themes.php?page=options.php&reset=true");
      die;
    }
  }

  // dodaje pod-opcję w menu administratora
  add_theme_page("Ustawienia $mythemename", "Ustawienia $mythemename",
    'edit_themes', basename(__FILE__), 'mytheme_admin');
}

add_action('admin_menu' , 'mytheme_add_admin');

Nasza funkcja najpierw dodaje odpowiednią pozycję w menu admina. Następnie w zależności od tego czy użytkownik chce zapisać lub zresetować opcje, aktualizuje je lub usuwa z bazy danych. Po drodze jest kilka zabezpieczeń, które sprawdzają, czy aby na pewno żądanie zmiany jest poprawne. Służy do tego np. check_admin_referer().

Definicja formularza

Mamy odpowiednią pozycję w panelu admina, ale na razie nie działa. To dlatego, że ostatnim parametrem funkcji add_theme_page() jest funkcja, która wygeneruje formularz. Aktualnie jej nie mamy. Czas, aby ją zdefiniować.

function mytheme_admin() {
  global $mythemename, $myshortname, $myoptions;
  // wiadomość zapisu lub resetu
  if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>zapisano.</strong></p></div>';
  if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>zresetowano.</strong></p></div>';

  // formularz
  $value=$myoptions[0];
  ?>
  <div class="wrap">
    <h2>Opcje <?php echo $mythemename; ?></h2>
    <form method="post">
      <?php wp_nonce_field('mytheme-save'); ?>
      <input name="<?php echo $value['id']; ?>"
        id="<?php echo $value['id']; ?>"
        type="text"
        value="<?php echo stripslashes(get_option( $value['id'],$value['std'] )); ?>"
      />
      <?php echo $value['desc']; ?>
      <p class="submit"> 
        <input name="save" type="submit" value="Zapisz" class="button-primary" />
        <input type="hidden" name="action" value="save" />
      </p>
    </form>
    <form method="post">
      <?php wp_nonce_field('mytheme-reset'); ?>
      <p class="submit">
        <input name="reset" type="submit" value="Reset" />
        <input type="hidden" name="action" value="reset" />
      </p>
    </form>
  </div><?php
}

Gotowe. Wszystko działa. Administrator może zapisywać i resetować opcje. Kolejnym krokiem jest sprawienie, aby wartość wpisana przez administratora zmieniała wygląd szablonu.

Wstrzyknięcie CSS’ów

Ostatnim krokiem, jest odzyskanie opcji, a następnie wygenerowanie odpowiedniego kodu CSS w nagłówku strony.

function load_my_custom_styles() {
  global $myoptions;
  $value=$myoptions[0];
  $link_color = get_option($value['id'], $value['std']);

  // wygeneruj style CSS
  ?>
  <style type="text/css">
    /* <![CDATA[ */
    a, a:link, a:visited {
    color:#<?php echo $link_color.' !important'; ?>;}
    /* ]]> */
  </style>
  <?php
}

add_action('wp_head', 'load_my_custom_styles');

Użytkownik Twojego szablonu, może teraz zmieniać kolor linków na stronie według uznania. Wszystko sprowadza się do zapisania odpowiednich ustawień, a następnie odzyskania ich oraz wygenerowania kodu CSS.

część 10

Zobacz również
Kurs WordPress (5)Przeszukiwanie i dołączanie plików szablonu. Wstrzykiwanie treści. Mechanizm zaczepów i filtrów.
Kurs WordPress (6)Dodawanie filtrów. Własna pętla oraz szablon podstrony.
Kurs WordPress (7)Dodawanie własnego kontenera na widgety.
Kurs WordPress (8)Tworzenie własnego widgetu.
Kurs WordPress (10)Dynamiczne wstawianie treści, czyli shortcodes.
Kurs WordPress (11)Stwórz własną galerię przy pomocy pluginu.
Projektowanie stron WWW (1)10 heurystyk Jakoba Nielsena – Twoja ściąga.
Kurs obiektowego JavaScript (1)Wstęp, historia i zastosowanie języka. Dla kogo jest ten kurs?