Tworzenie własnego motywu w WordPress

Przez /

Oto przykładowy prosty szablon WordPress wraz z omówieniem:

  1. Utworzenie plików szablonu:
  • W głównym folderze motywu WordPress utwórz nowy folder o nazwie „my-simple-theme”.
  • W folderze „my-simple-theme” utwórz plik o nazwie „style.css” i dodaj poniższy kod:
    /*
    Theme Name: My Simple
    Theme Description: A simple WordPress theme
    Author: Your Name
    Author URI: Your website
    Version: 1.0
    */
  • W folderze „my-simple-theme” utwórz plik o nazwie „index.php” i dodaj poniższy kod:
    <?php get_header(); ?>
    <div class="content"> <h1>Welcome to My Simple Theme!</h1> <p>This is a simple WordPress theme.</p> </div> <?php get_footer(); ?>
  • W folderze „my-simple-theme” utwórz plik o nazwie „header.php” i dodaj poniższy kod: <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php wp_title(); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header> <h1>My Simple Theme</h1> <nav> <?php wp_nav_menu(); ?> </nav> </header>
  • W folderze „my-simple-theme” utwórz plik o nazwie „footer.php” i dodaj poniższy kod:
    <footer> <p>&copy; <?php echo date('Y'); ?> My Simple Theme. All rights reserved.</p> </footer> <?php wp_footer(); ?> </body> </html>
  1. Aktywowanie szablonu:
  • Skopiuj folder „my-simple-theme” do folderu „wp-content/themes/” w swojej instalacji WordPressa.
  • Zaloguj się do panelu administracyjnego WordPressa i przejdź do sekcji „Wygląd” -> „Motywy”.
  • Powinieneś zobaczyć swój nowy szablon „My Simple Theme” na liście motywów. Kliknij przycisk „Aktywuj”, aby go aktywować.

Omówienie:

  • Plik „style.css” zawiera metadane motywu, takie jak nazwa, opis, autor itp. Warto je dostosować do własnych potrzeb.
  • Plik „index.php” definiuje strukturę strony. Wykorzystuje funkcje WordPressa, takie jak get_header() i get_footer(), aby zaimportować pliki nagłówka i stopki.
  • Plik „header.php” zawiera kod HTML nagłówka strony, w tym deklarację doctype, meta tagi, tytuł strony i menu nawigacyjne.
  • Plik „footer.php” zawiera kod HTML stopki strony, w tym treść stopki i wywołanie funkcji WordPressa wp_footer().

Ten przykład przedstawia bardzo prosty szablon WordPress, który można dalej rozwijać i dostosowywać w zależności od potrzeb. Możesz dodawać dodatkowe pliki szablonów, style CSS, funkcje PHP itp., aby uzyskać bardziej zaawansowany i spersonalizowany szablon.

Przewijanie do góry