Reklama sponsora

7. Własna strona



Wstęp

W tej części zajmiemy się dalszym rozwojem wtyczki ZWP Czat. Dzisiaj nauczymy się tworzyć własne strony oparte o własny szablon wykorzystujący własny plik z arkuszami stylów. Co konkretnie zrobimy?

Nasz czat zapakowany w mały widget nie wygląda teraz zbyt atrakcyjnie dlatego też utworzymy własną stronę, na której będzie się wyświetlał. Stronę dodamy podczas aktywacji wtyczki. Dalej stworzymy odpowiedni filtr, który po zaczepieniu wykryje zdefiniowaną stronę czatu i zmieni szablon na ten, który sami utworzymy. Dodatkowo aby poprawić wygląd naszego czatu dołączymy własny plik z arkuszami stylów. Trochę jest do zrobienia a więc do dzieła.

Tworzenie własnej strony

Na początek zajmiemy się dodaniem własnej strony czatu. Przy aktywacji wtyczki najpierw sprawdzimy czy taka strona przypadkiem już nie istnieje, a następnie wykorzystamy odpowiednią funkcję odpowiedzialną za dodanie nowej strony.

Aby sprawdzić czy dana strona już istnieje możemy wykorzystać funkcję:

get_page_by_title( $page_title, $output, $post_type );

Ta funkcja pobiera trzy argumenty, z których tylko pierwszy jest obowiązkowy, aczkolwiek pozostałe w niektórych przypadkach też mogą się okazać bardzo przydatne:

  • $page – tutaj wpisujemy nazwę interesującej nas strony. Zaraz po zainstalowaniu wordpressa domyślnie tworzy się „Przykładowa strona”. W naszym przypadku sprawdzimy czy istnieje strona zatytułowana „ZWP Czat”.
  • $output – w tym miejscu określamy czy w momencie odnalezienia strony funkcja ma nam zwrócić obiekt czy tablicę. Domyślnie ten parametr jest ustawiony na obiekt. Do wyboru mamy: OBJECT, ARRAY_N, or ARRAY_A.
  • $post_type – tutaj możemy określić czy szukamy strony o tej nazwie czy też artykułu lub innego typu wpisu, który na przykład utworzyliśmy. Domyślnie jest tutaj ustawiona strona czyli „page”.

Teraz wiedząc że funkcja ta zwraca null gdy nie odnajdzie poszukiwanego zasobu umieszczamy następujący warunek:

if(get_page_by_title("ZWP Czat") == null) {
//Nie ma takiej strony a więc dodaję

}

W obrębie funkcji aktywacji wtyczki, czyli w naszym przypadku (z poprzedniej części) we wnętrzu funkcji zwpc_activation(), kiedy już sprawdzimy istnienie strony, w momencie jej braku przechodzimy do dodawania. W celu dodania własnej strony wykorzystamy funkcję:
wp_insert_post( array $postarr, bool $wp_error = false )

Funkcja ta na pierwszy rzut oka pobiera dwa argumenty, drugim z nich jest zwracany błąd, domyślnie ustawiony na false w momencie niepowodzenia. Pierwszym argumentem $postarr jest dość obszerna tablica zawierająca informacje o dodawanej stronie/wpisie:

  • ID – identyfikator, w momencie dodawania zostawiamy puste (wypełnia się automatycznie).
  • ‚post_author’ – Identyfikator użytkownika (autora). Domyślnie pobiera identyfikator zalogowanego użytkownika, w większości przypadków nie używamy tego parametru.
  • ‚post_date’ – Data dodania, domyślnie bierząca data.
  • ‚post_date_gmt’ – data w formacie GMT (domyślnie data posta)
  • post_content’ – Jeden z najważniejszych parametrów czyli treść strony/wpisu.
  • ‚post_content_filtered’ – Filtry posta, domyślnie pusty.
  • ‚post_title’ – Kolejny z najważniejszych parametrów czyli tytuł strony/wpisu.
  • ‚post_excerpt’ – Skrót/streszczenie/zajawka posta. Ogólnie to taki opis np artykułu w skrócie o czym jest. Domyślnie ten parametr jest pusty.
  • ‚post_status’ – Status, jeden z ważniejszych parametrów określający status posta. Tutaj do wyboru mamy kilka opcji.
    • publish – publiczny
    • draft – szkic
    • private – prywatny, czyli nie widoczny dla innych użytkowników i gości.
  • ‚post_type’ – Typ wpisu, tutaj domyślnie jest to „post” czyli zwykły wpis. Jeśli chcemy dodać stronę należy pamiętać by zmienić ten parametr na „page”.
  • ‚comment_status’ –  ten parametr określa czy zezwalamy na dodawanie komentarzy. Domyślna wartość jest pobierana z ustawień strony (ustawiamy w kokopicie). Dostępne opcje to „open” oraz „closed”.
  • ‚post_name’ – nazwa wpisu. Domyślnie jest to po prostu tytuł wpisu odpowiednio zmodyfikowany (kreski zamiast spacji).
  • ‚post_modified’ – data modyfikacji wpisu, raczej rzadko wykorzystywana opcja.
  • ‚post_parent’ – Identyfikator wpisu nadrzędnego. Domyślnie zero – czyli wpis bez rodzica.
  • ‚menu_order’ – Liczba całkowita określająca pozycję. W naszym przypadku nie ma znaczenia aczkolwiek kiedy dodajesz wpis i chciałbyś żeby był np na wierzchu to dajesz mu -1 lub 99 jeśli ma być na końcu.
  • ‚guid’ – adres do zasobu. Wypełnia się automatycznie w momencie dodawania.
  • ‚post_category’ – tablica kategorii. Może to być zarówno tablica nazw kategorii, skróty lub identyfikatory.
  • ‚tax_input’ – tablica taxonomii (o nich będzie później).
  • ‚meta_input’ – tablica pól dodatkowych (o ich też szerzej później).

Stronę czatu dodajemy tylko wtedy gdy zostanie spełniony warunek o braku takiej strony, przedstawiony wyżej:

if(get_page_by_title("ZWP Czat") == null) {
     //Nie ma takiej strony a więc dodaję
     $postarr = [
         "post_title" = "ZWP Czat",
         "post_content" = "Opis czatu",
         "post_type" = "page",
         "post_status" ="publish"
     ];
     wp_insert_post($postarr );
 }

W efekcie po dezaktywacji i ponownej aktywacji wtyczki ZWP czat powinniśmy otrzymać nową stronę w kokpicie. Należy zwrócić uwagę na to że dzięki zabezpieczeniu po ponownej dezaktywacji i aktywacji nic się nie stanie (ponieważ strona o tym tytule już istnieje). W powyższym kodzie wykorzystaliśmy tylko najbardziej podstawowe parametry, reszta pozostała domyślna.

 

Ścieżka do plików dodatkowych

Teraz kiedy jesteśmy pewni że strona czatu na pewno istnieje przechodzimy do utworzenia dla niej szablonu. Indywidualny szablon tworzymy w oddzielnym pliku PHP, tutaj dobrze jest określić zmienną globalną lub stałą zawierającą ścieżkę do katalogu z plikami naszej wtyczki co znacznie ułatwi nam obsługę wielu plików.

Najlepiej jest zdefiniować stałą na początku pliku głównego wtyczki zaraz pod komentarzem zawierającym informacje o wtyczce.
define("ZWPC_PATH", plugin_dir_path(__FILE__));

Warto tutaj pamiętać także o unikalności nazwy zmiennej, ponieważ w czym większej ilości wtyczek zastosujemy ten manewr tym większe prawdopodobieństwo że nastąpi miedzy nimi konflikt.

W tym miejscu warto także nieco rozszerzyć strukturę katalogów naszej wtyczki dla lepszego uporządkowania. Dodajmy kilka dodatkowych katalogów/folderów:

  • templates – w tym katalogu umieścimy wszystkie nasze szablony, z których korzysta nasza wtyczka. W tej części będzie to zwp_czat.php zawierający kod naszego czatu.
  • inc – dodatkowe pliki zawierające funkcje oraz klasy php, które wykorzystuje nasza wtyczka (skrót od includes).
  • css – folder zawierający pliki stylów css, które będziemy dołączać do strony.
  • js – pliki zawierające kod JavaScript.

Dzięki takiej strukturze praca nad średniej wielkości wtyczkami stanie się łatwiejsza, szybsza i przyjemniejsza oraz bardziej intuicyjna i zrozumiała dla innych programistów.

Własny szablon

Teraz aby utworzyć własny szablon należy utworzyć plik zwp_czat.php w katalogu templates (ogólnie nazwa może być dowolna, ważne jednak aby pamiętać o niej później podczas podczepiania). Pierwszą rzeczą jaką przeważnie umieszczamy w podobnych plikach szablonu jest część nagłówkowa strony. W tym celu wykorzystujemy funkcję

get_header();

Podobnie jest w przypadku stopki, którą umieszcza się analogicznie do nagłówka, za pomocą funkcji:

get_footer();

Są to dwa elementy strony, które powtarzają się praktycznie na każdej podstronie. Ogólnie często powtarzającym się elementem jest jeszcze sidebar, ale temat tworzenia szablonów to temat na oddzielny kurs, który można znaleźć Tutaj

Pomiędzy dwie wyżej wymienione funkcje ładujemy kod, odpowiedzialny za wyświetlanie treści, które nas interesują. w naszym przypadku po prostu umieszczamy tam kod odpowiedzialny za wyświetlanie czatu.

Ponieważ już w dwóch miejscach potrzebujemy wyświetlić czat (czyli nasz widget i szablon) tworzymy funkcję w klasie czatu, którą będziemy mogli wykorzystać w odpowiednich miejscach. Co robimy po kolei.

  1. Tworzymy funkcję w klasie ZWP_Czat o nazwie show_zwpc_html($place), która jako argument pobiera miejsce gdzie ma zostać wyświetlony czat.
//funkcja wyświetlająca czat
 function show_zwpc_html(){
 
 }

2. Następnie przenosimy kod z funkcji widgetu do nowo utworzonej show_zwpc_html, oraz zmieniamy kilka rzeczy dostosowując kod.

function show_zwpc_html($place){
 if (isset($_POST['post_content'.$place])) {
 $this->add_post($_POST['post_content'.$place]);
 }
 if (is_user_logged_in()) {
 echo '
<form method="POST">
 <input type="hidden" name="zwpc_action" value="add"/>
 <label for="post_content'. $place . '">Treść posta</label>
 <input type="text" name="post_content'.$place.'" value="" placeholder="Treść posta"/>
 <input type="submit" value="Napisz" class="button-primary"/>
 </form>

';
 }
 echo '
<table>';
 $zwpc_posts = $this->get_zwpc_posts();
 if ($zwpc_posts) {
 foreach ($zwpc_posts as $zwpc_p) {
 echo '
<tr>';
 echo '
<td>' . $zwpc_p->create_date . ' 
 ' . $zwpc_p->post_content . '</td>

';
 echo '</tr>

';
 }
 }
 echo '</table>

';
 }

3. Wykorzystujemy funkcję w naszym widgecie.

function widget($args, $instance){
        global $ZWP_Czat;
        echo $args['before_widget'];
        $ZWP_Czat->show_zwpc_html('widget');
        echo $args['after_widget'];
    }

Teraz możemy po prostu użyć funkcje wyświetlającą czat w naszym szablonie strony.


<?php get_header(); global $ZWP_Czat; $ZWP_Czat->show_zwpc_html('template');
get_footer();

Teraz kiedy już mamy szablon nie pozostaje nic innego jak podpiąć go pod odpowiedni post. W tym celu stosujemy odpowiedni filtr odpowiedzialny za podmianę szablonu wpisu

Przed podpięciem szablonu strona dodana przez naszą wtyczkę wygląda zupełnie normalnie.

add_filter( 'page_template', 'zwpc_change_chat_template' );
function zwpc_change_chat_template($template){
 global $post;
 $single_template = ZWPC_PATH . '/themes/zwp_czat.php';
 if(isset($post->post_name) && $post->post_name == 'zwp-czat') {
 return $single_template;
 } else {
 return $template;
 }
}

W pierwszej linijce powyższego kodu korzystamy z filtra odpowiadającego za załączenie odpowiedniego pliku szablonu. W kolejnej linijce tworzymy funkcję filtrującą pobierającą szablon.

W naszej funkcji najpierw odnosimy się do zmiennej post dostępnej globalnie następnie określamy ścieżkę do naszego własnego szablonu.

Później tylko sprawdzamy czy użytkownik nie wszedł na dodaną przez naszą wtyczkę stronę i jeśli tak to zwracamy nasz własny szablon wtyczki a jeśli nie to po prostu zwracamy pobrany szablon przez co nic się nie powinno wydarzyć.

Po dodaniu powyższego kodu otrzymujemy efekt jak na obrazku poniżej.

Widok nie jest zbyt atrakcyjny a więc dołączymy jakieś własne style aby choć trochę poprawić efekt. Szerzej dołączanie stylów opisałem przy tworzeniu własnego szablonu Tutaj różnica będzie polegała na określeniu ścieżki do naszego pliku ze stylami. W tym celu wykorzystamy nasza stałą ZWPC_PATH


function zwpc_add_scripts_and_styles() {
wp_enqueue_style( 'zwpc-main-css', ZWPC_PATH . '/css/main.css');
}
add_action( 'wp_enqueue_scripts', 'zwpc_add_scripts_and_styles' );

Teraz jeszcze trzeba utworzyć plik ze stylami, który właśnie załączyliśmy. W katalogu css tworzymy plik main.css, w którym poprawimy trochę widok naszego czatu.

.zwp_czat {
 width:86%;
 margin:0% 5%;
 float:left;
 padding: 2%;
}
.zwp_czat input[type=text] {
 width:80%;
 float:left;
 height:2.5rem;
}
.zwp_czat input[type=submit] {
 width:20%;
 float:right;
 height:2.5rem;
}

W powyższym kodzie sprawiamy że nasz czat zyska pewien odstęp od krawędzi oraz pole i przycisk ułożą się w jednej linii. Aby nasze rozwiązanie działało musimy jeszcze zapakować czat w pojemnik w naszym szablonie.


get_header();
?>
<div class="zwp_czat">
<?php
global $ZWP_Czat;
$ZWP_Czat->show_zwpc_html('template');
?>
</div>
<?php
get_footer();

Po tych działaniach uzyskamy nieco przyjemniejszy efekt jak na obrazku poniżej.

No i to by było na tyle w tej lekcji. Ogólnie nie polecam tego rozwiązania ponieważ może się kłócić z niektórymi szablonami, lepszym rozwiązaniem będzie umieszczanie elementów dzięki shortcode, które opisze w następnej części.

Cały kod wtyczki ZWP Czat po tej lekcji można pobrać ZWP_Czatv11

 

 

 

Dodany przez Paweł
2017-01-08 09:28:35

kiedy reszta?


Dodaj komentarz

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