jak zaprojektować niestandardowy szablon strony WordPress [aktualizacja 2021]

Szablony Cutsom WordPress

motywy WordPress są po prostu świetne. Sprawiają, że projektowanie stron internetowych WordPress jest tak łatwe.

ale co się dzieje, gdy chcesz wyjść poza wybrany temat?

co zrobić, jeśli chcesz użyć niestandardowego układu WordPress na konkretnej stronie?

cóż, niektóre motywy nie pozwalają na zmianę ich układów.

wynik obrazu dla mojego mema

ale są pewne obejścia tego.

co to jest niestandardowy szablon strony i jak go przypisać?

układ stron i postów WordPress jest kontrolowany przez plik szablonu o nazwie ” strona.php”. Szablony to pliki, które mówią WordPress, jak wyświetlać różne rodzaje treści.

teraz możesz nie chcieć, aby wszystkie strony i posty wyglądały tak samo. To jest, gdy potrzebujesz niestandardowego szablonu strony.

jakich szablonów stron WordPress używasz?

chcesz dowiedzieć się, jakiego szablonu strony używasz lub jak przełączać się między szablonami?

to proste, musisz:

  1. przejdź do panelu administracyjnego WordPress,
  2. z menu po lewej stronie Wybierz „strony”,
  3. najedź kursorem na tytuł strony,wszystkie strony w WordPress
  4. z menu pod tytułem wybierz „szybka edycja”,
  5. z menu pod tytułem okno „szybka edycja”, przejdź do rozwijanego menu „szablon”.

Szablony WordPress

tutaj możesz zobaczyć wszystkie dostępne szablony motywów i możesz przypisać inny szablon do bieżącej strony.

na przykład istnieje opcja zmiany strony na pełną szerokość, jeśli chcesz. Ale nie ma opcji dla szablonu, który dodaje drugi pasek boczny.

dlatego niestandardowe szablony WordPress mogą się przydać. Za każdym razem, gdy zapiszesz nowy szablon, będzie on dostępny wraz ze starymi.

teraz możesz przypisać to zadanie również na stronie. Po wybraniu edycji strony, po prawej stronie, przejdź do „atrybuty strony” – > szablon.

Przypisywanie szablonu strony

Jak utworzyć motyw potomny

teraz, zanim pobrudzimy sobie ręce tworząc niestandardowy szablon strony WordPress, należy pamiętać o jednym: wprowadzić zmiany w motywie potomnym. Nie chcesz powodować nieodwracalnych zmian w motywie nadrzędnym.

motyw podrzędny WordPress to sub-motyw, który dziedziczy wszystkie funkcje i style motywu nadrzędnego. Teraz, jeśli motyw nadrzędny zostanie zaktualizowany, nie wpłynie to na motyw podrzędny i zmiany nie zostaną nadpisane.

Jak stworzyć motyw potomny? Oto kroki:

  1. Zaloguj się do swojego cPanel,
  2. przejdź do menedżera plików,Uzyskaj dostęp do menedżera plików wewnątrz cPanel
  3. przejdź do public_html -> wp-content -> folder themes,Uzyskaj dostęp do folderu Themes w cPanel
  4. podczas gdy wewnątrz folderu „Themes” Dodaj nowy folder z folderu „+” w górnym menu. Nadaj mu nazwę. Najlepszym rozwiązaniem jest użycie nazwy tematu, do którego dołączasz „-child”. Użyj również myślników zamiast spacji. W moim przypadku użyję mesmerize-child, ponieważ używam motywu Mesmerize,
  5. wewnątrz folderu, utwórz nowy plik i nazwij go ” stylem.css”,Utwórz styl.css w cPanel
  6. . Kliknij plik prawym przyciskiem myszy i wybierz opcję „Edytuj”.
    /* Theme Name: Your Theme Child Theme URL: http://yourdomain.comDescription: Your Theme Child Theme Author: Your NameAuthor URL: http://yourdomain.comTemplate: yourtheme Version: 1.0.0 Text Domain: yourtheme-child */

    tutaj możesz wkleić część kodu do nadrzędnego pliku CSS lub dodać własną stylizację.

  7. Zmień temat i nazwy domen, a następnie naciśnij „Zapisz”,
  8. Utwórz inny plik w tym samym folderze. Tym razem nazwij go ” funkcje.php”. Wklej poniższy kod:
    <?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?>
  9. przejdź do Pulpitu Nawigacyjnego WordPress, wygląd-motyw>. Twój motyw potomny będzie tam, po prostu musisz go aktywować.

i gotowe.

następnie stwórzmy nowy szablon, dobrze?

Jak stworzyć niestandardowy szablon strony WordPress?

możesz zacząć od istniejącego kodu motywu i wprowadzić niezbędne korekty.

oto kroki:

  1. przejdź do cPanel -> Menedżer plików,
  2. przejdź do public_html -> wp-content -> folder motywów,
  3. otwórz główny folder motywów,
  4. Zidentyfikuj stronę.plik php. Będzie to wyglądać tak:
    <?php mesmerize_get_header(); ?> <div class="page-content"> <div class="<?php mesmerize_page_content_wrapper_class(); ?>"> <?php while (have_posts()) : the_post(); get_template_part('template-parts/content', 'page'); endwhile; ?> </div> </div><?php get_footer(); ?>
  5. Wybierz plik, a następnie wybierz „Kopiuj”,
  6. w oknie, które się pojawi, zmień ścieżkę pliku na ścieżkę w folderze podrzędnym motywu,Kopiuj stronę.php do nowej lokalizacji pliku
  7. Zmień nazwę nowego pliku, aby łatwo zidentyfikować, co robi.
  8. Dodaj komentarz wewnątrz pliku, abyś mógł powiedzieć WordPressowi, że jest to nowy niestandardowy szablon. Zrób to wybierając „Edytuj” i wstawiając ten tekst:
    /* * Template Name: Your custom TEmplate's name * description: >- Explain what your new templates does */

    Twój nowy plik powinien wyglądać tak:

    <?php /* * Template Name: Custom Full Width * description: >- Page template without sidebar */mesmerize_get_header(); ?> <div class="page-content"> <div class="<?php mesmerize_page_content_wrapper_class(); ?>"> <?php while (have_posts()) : the_post(); get_template_part('template-parts/content', 'page'); endwhile; ?> </div> </div><?php get_footer(); ?>

możesz dodać tutaj również kopie innych plików. Na przykład możesz dostosować singiel.plik php, który zmieni wygląd postów na blogu.

następnie musisz zakasać rękawy i napisać jakiś kod.

a jeśli chcesz zmienić styl CSS, możesz to zrobić wewnątrz dostosowywania motywu podrzędnego, wewnątrz dodatkowego CSS lub wewnątrz stylu.plik css.

jednak istnieje prostsze rozwiązanie …

w przypadku Kreatora witryn, takiego jak Colibri, cały kod „stoi” za sobą i nie blokuje nietechnicznego twórcy witryny. Każde dodanie lub zmiana strony niestandardowej jest wizualnie odzwierciedlane w module dostosowywania. W ten sposób twórca strony ma większą kontrolę nad projektem. Całkiem niestandardowa strona będzie gotowa w mgnieniu oka, bez zawracania sobie głowy kodem za stroną.

Leave a Reply

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.