Po kilku latach (lub nawet miesiącach) projektowania i rozwijania motywów WordPress, szczególnie dla klientów, zaczynasz zdawać sobie sprawę, że wiele funkcji można znormalizować lub poddać destylacji w "motyw lub zestaw startowy". Pomaga to w rozpoczęciu procesu rozwoju i posuwaniu się naprzód.
Najlepszym pierwszym krokiem w tym kierunku, jest odnalezienie większości popularnych funkcji i uwzględnienie ich w functions.php . To functions.php W miarę pojawiania się nowych projektów plik będzie musiał zostać rozszerzony, aby spełnić konkretne potrzeby tego tematu, ale zapewni on więcej niż świetny punkt wyjścia do rozwoju.
Jest tam około 13 kluczowych funkcji, z których chciałbym zacząć i które dodam w razie potrzeby ...
Funkcja menu nawigacyjnego, wprowadzona w WordPress 3.0, pozwala na intuicyjne tworzenie i utrzymywanie menu nawigacyjnych w motywach.
Przynajmniej standardowy motyw będzie wymagał głównego menu nawigacyjnego, być może w nagłówku i pomocniczego menu nawigacyjnego w stopce. Aby to zrobić, zarejestrujemy te dwa menu "Menu główne" i "Menu dodatkowe"
Chociaż nie jest to szczególnie nowa funkcja, nadal jest przyjemnie ją zawijać if function_exists() na wypadek, gdyby użytkownik utknął w instalacji pre 3.0:
w functions.php plik, obejmują:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Teraz, gdy menu są już zarejestrowane, musimy powiedzieć tematowi, w jaki sposób je wyświetlić. Chcielibyśmy, aby główne menu pojawiło się w naszym nagłówku. Tak więc w naszym header.php plik, dołączamy następujący kod:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Najpierw sprawdzamy, czy mamy zdefiniowane menu o nazwie "main_menu", a jeśli to zrobimy, wstawiamy jego zawartość tutaj, w przeciwnym wypadku cofniemy do domyślnego wp_list_pages() które możemy dalej dostosować, aby wyświetlać linki, gdy potrzebujemy.
Jeśli chcesz jeszcze bardziej dostosować menu, zobacz Strona kodeksu WordPress na wp_nav_menu() funkcjonować.
Chcemy, aby dodatkowe menu pojawiło się w stopce, więc otwieramy footer.php i dołącz następujący kod:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Ta funkcja pozwala na użycie niestandardowego CSS do stylu edytora wizualnego WordPress TinyMCE.
Utwórz plik CSS o nazwie editor-style.css i wklej swoje style w środku. Jako symbol zastępczy lubię zacząć od stylów w editor-style.css plik motywu Dwudziestu Dwunastu.
w functions.php dodaj:
add_editor_style();Jeśli nie chcesz używać nazwy "editor-style" dla pliku CSS, a także chcesz przenieść plik w innym miejscu, np. W katalogu css, zmodyfikuj funkcję.
Na przykład chcę nazwać mój plik tiny-mce-styles.css i chcę go w moim katalogu CSS; więc moja funkcja będzie wyglądać następująco:
add_editor_style('/css/editor-style.css'); Podczas gdy jesteśmy przy tym, możemy równie dobrze zaprojektować edytor języków pisanych od prawej do lewej. W katalogu kompozycji utwórz plik CSS o nazwie editor-style-rtl.css i, co najmniej, obejmują:
html .mceContentBody {direction: rtl;unicode-bidi: embed;}li {margin: 0 24px 0 0;margin: 0 1.714285714rem 0 0;}dl {margin: 0 24px;margin: 0 1.714285714rem;}tr th {text-align: right;}td {padding: 6px 0 6px 10px;text-align: right;}.wp-caption {text-align: right;}Ponownie, jako symbol zastępczy, powyższe style pochodzą z motywu Dwudziestu Dwunastu. Restyle i rozszerzaj w razie potrzeby.
Większość osób komentujących blogi online ma przypisany awatar. Jeśli jednak nie są i nie podoba ci się domyślne opcje awatara w WordPress, możesz zdefiniować własne.
Aby to zrobić, dołącz następujący kod do swojego functions.php :
if ( !function_exists('cake_addgravatar') ) {function cake_addgravatar( $avatar_defaults ) {$myavatar = get_template_directory_uri() . '/images/avatar.png';$avatar_defaults[$myavatar] = 'avatar';return $avatar_defaults;} add_filter ('avatar_defaults', 'cake_addgravatar');} Najpierw sprawdzamy, czy funkcja istnieje. Jeśli tak, dodajemy filtr, który mówi WordPressowi, aby używał naszego niestandardowego zdefiniowanego awatara jako domyślnego.
Mówimy WordPressowi, aby znalazł ten awatar w naszym katalogu "images" wewnątrz katalogu tematycznego. Kolejnym krokiem jest oczywiście utworzenie samego obrazu i przesłanie go do folderu "images".
Funkcja formatowania wpisów umożliwia dostosowanie stylu i prezentacji postów. W chwili pisania tego tekstu istnieje 9 standaryzowanych formatów wiadomości, które użytkownicy mogą wybierać: na boku, galeria, link, zdjęcie, cytat, status, wideo, audio i czat. Oprócz tego domyślny format postu "Standard" wskazuje, że nie określono formatu postu dla konkretnego postu.
Aby dodać tę funkcję do swojego motywu, umieść następujący kod w swoim functions.php , określając formaty wiadomości, z których będziesz korzystać. np. jeśli chcesz tylko formatów postów na stronie, obraz, link, cytat i status, twój kod powinien wyglądać tak:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );Funkcja opisanego obrazu, jak kodeks wyjaśnia, pozwala autorowi wybrać reprezentatywny obraz dla postów, stron lub niestandardowych typów postów.
Aby włączyć tę funkcję, dołącz następujący kod do swojego functions.php :
add_theme_support( 'post-thumbnails' );Moglibyśmy na tym poprzestać i pozostawić WordPressowi zdefiniowanie rozmiarów miniatur lub moglibyśmy przejąć kontrolę i zdefiniować je sami. Oczywiście zrobimy to drugie!
Załóżmy, że prowadzimy witrynę z czasopismami, w której polecany obraz pojawi się w co najmniej 3 różnych rozmiarach. Może jeden duży obraz, jeśli post jest polecany lub jest najnowszym, średniej wielkości zdjęciem, jeśli jest tylko postem wśród reszty i regularnym rozmiarem może pojawić się gdzie indziej.
Korzystamy z add_image_size() funkcja, która nakazuje WordPressowi utworzenie kopii naszego wyróżnionego obrazu w naszych zdefiniowanych rozmiarach.
Aby to zrobić, dodajemy następujące elementy do functions.php :
// regular sizeadd_image_size( 'regular', 400, 350, true );// medium sizeadd_image_size( 'medium', 650, 500, true );// large thumbnailsadd_image_size( 'large', 960, '' ); Zobacz, jak pracować z add_image_size() funkcja albo przycinania miękkiego, albo twardego przycinania obrazów na Strona kodowa WordPress.
Po zdefiniowaniu powyższych rozmiarów obrazu (zwykłego, średniego i dużego) - i ponieważ domyślnie WordPress tego nie robi - dodamy możliwość wyboru naszych rozmiarów obrazu z poziomu interfejsu Ustawienia wyświetlania załączników .
Byłoby miło, gdyby można, podczas pisania postu, wstawić obraz o pożądanym rozmiarze, wybierając go z listy rozwijanej, jak zwykle w przypadku domyślnych rozmiarów WordPress.
Aby to zrobić, dodajemy następujące do naszego functions.php :
// show custom image sizes on when inserting mediafunction cake_show_image_sizes($sizes) {$sizes['regular'] = __( 'Our Regular Size', 'cake' );$sizes['medium'] = __( 'Our Medium Size', 'cake' );$sizes['large'] = __( 'Our Large Size', 'cake' );return $sizes;} add_filter ('image_size_names_choose', 'cake_show_image_sizes'); Dzięki temu możemy wybrać nasze rozmiary obrazów.
Ten jest prosty. Jeśli tworzysz motywy WordPressa przez jakiś czas, będziesz pamiętać, kiedy trzeba ręcznie włączyć kod, aby wyprowadzić kanał RSS bezpośrednio w pliku header.php. To podejście jest czystsze i opiera się na wp_head() hak akcji, aby wyprowadzić niezbędny kod.
w functions.php plik, obejmują:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Upewnij się, że masz it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Dzięki tej funkcji robisz pierwszy krok w kierunku udostępnienia swojego motywu do tłumaczenia.
Najlepiej wywołać tę funkcję z wnętrza after_setup_theme() hak akcji, czyli po uruchomieniu ustawień, rejestracji i inicjalizacji twojego motywu.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Teraz dodaj katalog o nazwie " languages "w twoim katalogu motywów.
Możesz dowiedzieć się więcej o funkcji load_theme_textdomain () na Strona kodowa WordPress .
Szerokość treści to funkcja w motywach, która pozwala ustawić maksymalną dozwoloną szerokość filmów, zdjęć i innych treści oemmbed w motywie.
Oznacza to, że po wklejeniu tego adresu URL w edytorze i WordPress automatycznie wyświetla rzeczywisty film z przodu, ten film nie przekroczy szerokości ustawionej za pomocą $content_width zmienna.
if ( ! isset( $content_width ) )$content_width = 600;WordPress zaleca również dodanie następujących CSS:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Chociaż jest to użyteczne, jest nieco ciężkie. Określa szerokość zawartości dla wszystkich treści. Co zrobić, jeśli chcesz mieć filmy o większej szerokości na stronach niż w postach i jeszcze większy rozmiar w niestandardowym typie wpisu? Obecnie nie ma sposobu, aby to zdefiniować. Istnieje jednak żądanie funkcji proponując włączenie $content_width zmienna na wbudowaną add_theme_support() .
Twój typowy motyw będzie miał co najmniej jeden pasek boczny. Kod służący do definiowania paska bocznego jest dość prosty.
Dodaj następujące elementy do swojego functions.php :
if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Main Sidebar','before_widget' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Spowoduje to zarejestrowanie i zdefiniowanie paska bocznego o nazwie "Główny pasek boczny" i jego znaczników HTML.
Możesz dowiedzieć się więcej o tym register_sidebar() funkcja na stronie kodowej WordPress.
Rutynowo znajdziesz potrzebę posiadania więcej niż jednego paska bocznego, dzięki czemu możesz po prostu skopiować / wkleić powyższy kod i zmienić jego nazwę.
Istnieje również register_sidebars() funkcja, która pozwala na rejestrowanie i definiowanie wielu pasków bocznych na raz, ale nie zapewnia elastyczności nadawania każdemu nowemu paskowi unikatowej nazwy.
Jeśli wyświetlasz fragmenty swoich postów na stronie indeksu blogów, domyślnie pojawi się WordPress [...] aby wskazać, że jest więcej "po skoku".
Najprawdopodobniej zechcesz dodać "więcej linków" i zdefiniować, jak to wygląda.
Aby to zrobić, musimy dodać następujący kod do naszego functions.php :
function new_excerpt_more($more) {global $post;return '...
function cake_content_nav( $nav_id ) {global $wp_query;if ( $wp_query->max_num_pages > 1 ) : ?>Jeśli masz specjalne instrukcje dotyczące swojego tematu, np. na stronie opcji motywu, którą użytkownik chce zobaczyć po pierwszym aktywowaniu motywu, można użyć następującej funkcji do przekierowania tam:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Zwróć szczególną uwagę na wp_redirect() funkcjonować. Pamiętaj, aby wymienić " themes.php?page=themeoptions "z adresem URL twojej strony.
W trakcie rozwoju czasami znajduję pasek admina (tool) WordPressa, który jest dość rozpraszający.
Jest w ustalonej pozycji u góry okna i w zależności od mojego układu może obejmować niektóre elementy nagłówka.
Nadal projektując i rozwijając, lubię ukrywać pasek administracyjny za pomocą tej przydatnej funkcji.
show_admin_bar( false );Czy masz jakieś ulubione funkcje do tworzenia szablonów WordPressa z uruchomionym skokiem? Jakie funkcje chciałbyś zobaczyć? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz z wieloma narzędziami przez Shutterstock.