Praktyka tworzenia pełnoprawnego shortcode'u – lekcja 31

przez Nikołajenko Maksym · Opublikowany Grudzień 3, 2015 · Zaktualizowano Sierpień 27, 2020

Treść ukryć

1 Osadzanie stylów w WordPressie i dodawanie krótkiego kodu

3 Wybór efektu shortcode i wygenerowanie szablonu wyjściowego

4.1 Kod całego opracowanego szablonu na tym etapie szkolenia

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:

add class creative link effect

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.

Efekt łącza do folderu przesyłania wordpress

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.

Dodaj link do klasy wordpress

Aby kod mógł zostać skopiowany do mojego pliku, zamieściłem dodatkowy fragment.

wp_register_style('link-effect', $tmpDir.'/creative-link-effects/css/component.css');
wp_enqueue_style('link-effect');

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:

[link_effect effect="1" links="https://wp-admin.com.ua, https://wp-admin.com.ua" anchors="Уроки WordPress1, Уроки WordPress2" target="blank"]

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:

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 'Количество анкоров и ссылок несовпадает'; }

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 'Количество анкоров и ссылок несовпадает'; }

Na początku definiujemy wszystkie atrybuty jako zmienne iz niektórych tworzymy tablice. W tej części przeprowadzamy również różne sprawdzenia, aby wykluczyć sytuacje, w których użytkownik nie wprowadził wymaganych parametrów lub wskazał ich niewłaściwą liczbę.. Wyjątki będą wyświetlać komunikat o błędzie zamiast linków. Jeśli już się rozwinąłeś ..php, wtedy odczytanie tego kodu nie będzie dla ciebie trudne.

Wybór efektu shortcode i wygenerowanie szablonu wyjściowego

   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;

---------

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;

---------

Następnie sprawdzamy, czy numer efektu jest poprawny., z którego powinien pochodzić 1 do 21 “ jeśli($efekt>0 && $efekt<22 ) { “. Po sprawdzeniu z konstrukcją warunkową „Sprawa przełącznik” sprawiamy, że program sprawdza zmienną $efekt i wybierz żądany blok kodu. Konstrukcja znajduje żądany blok kodu dla określonego efektu i wykonuje go.

W bloku kodu wykonywalnego:

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 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;

w zmienną $rez umieszczamy kawałek kodu <nav class=”cl-effect-1″ id=”cl-effect-1″> -> sprawdź, czy zmienna jest $spinki do mankietów masa -> za pomocą cyklu foreach iteruj przez wszystkie elementy tablicy i stacji dokującej (konkatenacja .=) je w zmienną $rez -> zamknij tag </nawigacja> -> zwróć zmienną z zwróć $ res, cała zawartość zmiennej zostanie wyświetlona na stronie serwisu. To samo można zrobić z innymi efektami., Uwaga struktura wzoru różnych efektów jest inna, więc uważaj.

Oto jak okazało się wyświetlać różne skróty na mojej stronie testowej:

Utwórz krótką lekcję wordpress 31

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

Usługi korepetycji online. Lista kursów, które prowadzę

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.

Czytaj więcej na stronie Nauczyciel WordPressa

Poradniki WordPressa

Praktyka tworzenia pełnoprawnego shortcode'u – lekcja 31

Osadzanie stylów w WordPressie i dodawanie krótkiego kodu

Rozważ kod samego shortcode:

Wybór efektu shortcode i wygenerowanie szablonu wyjściowego

W bloku kodu wykonywalnego:

Kod całego opracowanego szablonu na tym etapie szkolenia

Może Ci się spodobać...

Zostaw odpowiedź Anuluj odpowiedź

Tłumaczenie

WordPressa

Programowanie

Elastyczne

Darmowe samouczki wideo

Ukraińskie oprogramowanie

Najlepszy freelancing na Ukrainie

Usługi: WordPressa

Usługi SEO

Dla uczniów / Dla klientów

Tworzenie stron internetowych w naszym studiu

Hosting dla USA i Europy

Gdzie zarobić

Praktyka tworzenia pełnoprawnego shortcode'u – lekcja 31

Osadzanie stylów w WordPressie i dodawanie krótkiego kodu

Rozważ kod samego shortcode:

Wybór efektu shortcode i wygenerowanie szablonu wyjściowego

W bloku kodu wykonywalnego:

Kod całego opracowanego szablonu na tym etapie szkolenia

Może Ci się spodobać...

Dostosowywanie szablonów stron w WordPress – lekcja 23

Tworzenie wyskakującego okienka do portfolio - lekcja 28

Konfigurowanie niestandardowego typu dla portfela – lekcja 25

Zostaw odpowiedź Anuluj odpowiedź

Tłumaczenie

WordPressa

Programowanie

Elastyczne

Darmowe samouczki wideo

Ukraińskie oprogramowanie

Najlepszy freelancing na Ukrainie

Usługi: WordPressa

Usługi SEO

Dla uczniów / Dla klientów

Tworzenie stron internetowych w naszym studiu

Hosting dla USA i Europy

Gdzie zarobić