Łączenie stylów, skrypty i obrazy WordPress – lekcja 13
Jeśli zrobiłeś wszystko dobrze na ostatniej lekcji, wtedy najprawdopodobniej wyświetliłeś dane z pliku index.php na ekranie, ale style nie zostały załadowane. Teraz, po aktywacji szablonu, otrzymałem to zdjęcie:
Problemem jest, że nasz szablon ma nieprawidłowe adresy stylów i obrazów, naprawmy to i umieśćmy odpowiednie funkcje we właściwych sekcjach kodu w pliku index.php w katalogu głównym naszego motywu.
Praca z szablonem po podłączeniu i aktywacji
nie wiem jak ty, ale miałem dodatkowy fragment kodu i usunąłem go, też zrobisz to dobrze, aby ten obszar nam nie przeszkadzał.
|
1 2 3 4 5 |
<!-- Halcyonic by HTML5 UP html5up.net | @n33co Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> |
Zacznijmy dodawać funkcje
Dodanie funkcji określania języka strony do tagu <HTML>
<HTML <?atrybuty_języka php(); ?>>
Między tagami <tytuł></tytuł> wklej funkcję jak poniżej.
|
1 |
<title><?php bloginfo('name'); ?><?php wp_title('|'); ?></title> |
Ten kod należy wkleić, nawet jeśli nadal używasz wtyczek do wypełnienia tytułu i opisu.
Ponadto, aby wykonać ogólne kodowanie bloga, lepiej jest użyć tego wpisu:
<zestaw znaków meta=”<?Informacje o blogu php( „zestaw znaków” ); ?>”>
Zastąpienie naszego standardowego kodowania z szablonu:
<meta http-equiv=”typ treści” content=”tekst/html; charset=utf-8″ />
Jeśli rodzaj kodowania Ci nie odpowiada, możesz go nieco rozszerzyć za pomocą poniższego wpisu. Ja bym to tak zostawił, ponieważ nasz szablon miał podobny widok.
<meta http-equiv=”Typ zawartości” content=”<?Informacje o blogu php(„html_type”); ?>; zestaw znaków=<?Informacje o blogu php(„zestaw znaków”); ?>” />
Wiersze ze słowami kluczowymi i opisem można bezpiecznie usunąć, ponieważ na stronie będziemy używać specjalnych wtyczek. Usuń linie:
|
1 2 |
<meta name="description" content="" /> <meta name="keywords" content="" /> |
Następnie musimy podać poprawną ścieżkę do plików skryptów, dodaj specjalną funkcję do adresu każdego skryptu, który zwraca adres folderu szablonu. Jest to konieczne, jeśli nagle zmienisz nazwę folderu szablonów, i będziemy go potrzebować w przyszłości.
Zmień część kodu szablonu:
|
1 2 3 4 |
<script src="js/jquery.min.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-layers.min.js"></script> <script src="js/init.js"></script> |
Dla następującego kodu:
|
1 2 3 4 |
<script src="<?php echo bloginfo('template_url'); ?>/js/jquery.min.js"></script> <script src="<?php echo bloginfo('template_url'); ?>/js/skel.min.js"></script> <script src="<?php echo bloginfo('template_url'); ?>/js/skel-layers.min.js"></script> <script src="<?php echo bloginfo('template_url'); ?>/js/init.js"></script> |
Podobnie musisz uwzględnić style:
|
1 2 3 4 5 |
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/skel.css" /> <link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/style.css" /> <link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/style-desktop.css" /> <!--[if lte IE 9]><link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/ie9.css" /><![endif]--> <!--[if lte IE 8]><script src="<?php echo bloginfo('template_url'); ?>/js/html5shiv.js"></script><![endif]--> |
Po skonfigurowaniu stylów i skryptów Twoja witryna powinna zacząć nabierać ludzkiego wyglądu..
Pozostaje poprawnie połączyć zdjęcia w szablonie, tak, aby były dobrze wyeksponowane i nie psuły naszego wyglądu.
Tej samej funkcji można tymczasowo używać do dostosowywania zdjęć., którego używaliśmy do dołączania stylów i skryptów.
|
1 |
<?php echo bloginfo('template_url'); ?> |
Do szybkiej wymiany użyłem programu notepad++, jak i narzędzie wyszukaj/zamień.
Chciał:
img src=”obrazy
zastąpiony przez:
źródło img =”<?php echo informacje o blogu(„url_szablonu”); ?>/zdjęcia
Jeśli wszystko jest zrobione poprawnie, będziesz mieć zdjęcia po zapisaniu.
Po tych krokach mój szablon wygląda tak:
Dodaj do kodu przed tagiem zamykającym </głowa> funkcjonować <?php wp_head(); ?>, ta funkcja służy jako etykieta, w razie potrzeby dodaje javascript i style do szablonu, które są potrzebne do CMS WordPress oraz wtyczek, które zainstalujesz.
Ponadto silnik WordPress musi dodać klasy do kodu szablonu, które można później wykorzystać do stylizowania poszczególnych sekcji. Aby dodać te klasy, użyj następującego kodu w swoim szablonie:
<ciało <?php klasa_ciała( ); ?>>
Zmienna $class może zawierać dodatkowe klasy, które sam chcesz dodać.. Więcej o funkcji można przeczytać tutaj.
Przykład użycia funkcji z dodatkowymi klasami.
<ciało <?php klasa_ciała( 'Nazwa klasy' ); ?>>
Ta lekcja się skończyła, dalej będzie jeszcze ciekawiej.
/*
- 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.
