Praktyka tworzenia pełnoprawnego shortcode'u – lekcja 31
Jako przykład opracowania krótkiego kodu i naprawienia materiału omówionego na WordPressie, weźmiemy zbiór efektów dla linków Kreatywne efekty łącza i opracuj dla niego własny krótki kod w przyszłym motywie premium.
Praca kolekcji stylów sprowadza się do, uwzględniać style i organizować klasy, gdzie potrzebne. Oto przykład dostosowanej struktury dla jednego efektu:
Ogólnie zestaw oferuje 21 styl łącza do witryny. Demonstracja, jak mogą działać różne style linków Spójrz tutaj.
Osadzanie stylów w WordPressie i dodawanie krótkiego kodu
Aby rozpocząć, pobierz gotowy plik stylu kolekcji z mój Strona.
W moim archiwum znajdują się już lekko przygotowane style dla naszego szablonu.
Przejdź do pobranego archiwum i przenieś folder kreatywne-efekty-linków u podstaw naszego tematu.
Następnie musimy połączyć plik stylu z naszym motywem., aby to zrobić, przejdź do pliku /wp-content/themes/my_theme_tmp/functions/custom-header-script.php i dodaj kod połączenia.
Aby kod mógł zostać skopiowany do mojego pliku, zamieściłem dodatkowy fragment.
1 2 |
wp_register_style('link-effect', $tmpDir.'/creative-link-effects/css/component.css'); wp_enqueue_style('link-effect'); |
Po podłączeniu pliku stylu musimy utworzyć nowy shortcode w pliku utworzonym w poprzednich lekcjach:
wp-content/themes/my_theme_tmp/functions/shortcode/shortcode.php
Ponieważ lekcja ma na celu utrwalenie wiedzy, myślę, że dobrze byłoby rozłożyć gotowy kod i powiedzieć, jak go używać.
Rozważ sam krótki kod i fragment kodu:
1 |
[link_effect effect="1" links="https://wp-admin.com.ua, https://wp-admin.com.ua" anchors="Уроки WordPress1, Уроки WordPress2" target="blank"] |
W krótkim kodzie możesz określić, jaki efekt Cię interesuje efekt=”1″ i określ linki i teksty dla linków (kotwice) Oddzielone przecinkami. zwracam uwagę, że liczba ogniw i ich kotwic powinna być taka sama. Możesz także określić atrybut cel=”pusty” jeśli chcesz, aby link otwierał się w nowym oknie.
Rozważ kod samego shortcode:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function creative_link_effect_func( $atts ) { $effect = $atts['effect']; if($effect==''){ return 'Выберите эффект, от 1 до 21'; } $links = $atts['links']; $target = $atts['target']; $subtitle = $atts['subtitle']; if($target=='' or !isset($target)){ $target == '_self'; } if($links==''){ return 'Вы должны указать минимум 1 ссылку которую будите использовать'; } $anchor = $atts['anchors']; if($anchor==''){ return 'Вы должны указать минимум 1 содержимое ссылки'; } $links = explode(',',$links); $anchor = explode(',',$anchor); $subtitle = explode(',',$subtitle); if(count($links)!= count($anchor)){ return 'Количество анкоров и ссылок несовпадает'; } |
Wybór efektu shortcode i wygenerowanie szablonu wyjściowego
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
if($effect>0 && $effect<22 ) { switch ($effect) { case 1: $res = '<nav class="cl-effect-1" id="cl-effect-1">'; if(is_array($links)){ foreach($links as $k => $v){ $res .= '<a href="'.$links[$k].'" target="'.$target.'">'.$anchor[$k].'</a>'; } } $res .= '</nav>'; return $res; break; case 2: $res = '<nav class="cl-effect-2" id="cl-effect-2">'; if(is_array($links)){ foreach($links as $k => $v){ $res .= '<a href="'.$links[$k].'" target="'.$target.'"><span data-hover="'.$anchor[$k].'">'.$anchor[$k].'</span></a>'; } } $res .= '</nav>'; return $res; break; --------- |
W bloku kodu wykonywalnego:
1 2 3 4 5 6 7 8 9 10 |
case 1: $res = '<nav class="cl-effect-1" id="cl-effect-1">'; if(is_array($links)){ foreach($links as $k => $v){ $res .= '<a href="'.$links[$k].'" target="'.$target.'">'.$anchor[$k].'</a>'; } } $res .= '</nav>'; return $res; break; |
Oto jak okazało się wyświetlać różne skróty na mojej stronie testowej:
Jeśli ci się nie udało, wtedy radziłbym ci po prostu skopiować mój kod z pliku krótki kod.php i prześledź linia po linii, co się tam dzieje. Możesz także przeczytać poprzednią lekcję „Tworzenie skrótów - lekcja 30“. Powodzenia w opracowywaniu odpowiednich szablonów stron internetowych, zgodnie z zasadami API WordPressa.
Kod całego opracowanego szablonu na tym etapie szkolenia
/*
- Podstawowy kurs projektowania stron internetowych;
- Układ stron;
- Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
- Tworzenie stron internetowych w PHP.