Dodanie miniatury do posta WordPress – lekcja 16
Na wielu stronach materiał jest podzielony na kategorie i kiedy do nich wchodzimy, wtedy widzimy nie tylko tytuł i tekst, ale także miniatura posta (w angielskiej miniaturze). Moja strona jest przykładem.:
Nazwa miniatura historycznie pozostawała za takim obrazem., chociaż wiele zdjęć może być nie tylko małych, ale także rozciągnąć na całą szerokość strony.
W przypadku prac z miniaturami należy je najpierw umieścić w CMS. Aby włączyć miniatury w WordPress, musisz dodać specjalny kod do pliku functions.php.
Nie mamy jeszcze pliku functions.php, służy do pisania funkcji php i uruchamiania wbudowanych funkcji w CMS. Stwórzmy plik functions.php w naszym motywie my_theme_tmp.
W pliku functions.php wpisz kod:
|
1 2 3 4 5 |
<?php if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); } ?> |
Ten kod włączy obsługę miniatur w CMS, bez niego po prostu nie będziesz mógł dodać miniatury w panelu sterowania. Po dodaniu kodu do pliku functions.php przejdź do panelu administracyjnego i zacznij tworzyć nowy post, po prawej stronie masz metaboks „Rekordy miniatur” (Przedstawiony obraz).
WordPress ma standardowy rozmiar miniatur, które w razie potrzeby można zmienić., dodanie specjalnego kodu:
add_theme_support( „post-miniatury” );
Pełny kod pliku functions.php będzie wyglądał następująco:
|
1 2 3 4 |
if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 200, 200, true ); } |
Po zakończeniu wszystkich ustawień możesz przystąpić do pracy z wyjściem miniatury w pętli pliku archive.php.
Wyjściowe miniatury postów WordPress
Aby wyświetlić zdjęcie wpisu, należy wstawić specjalny kod obok tekstu wpisu w szablonie archive.php.
|
1 2 3 4 5 6 7 |
<div class="thumb"> <a href="<?php the_permalink(); ?>" class="image image-full"> <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> </a> </div> |
Na zdjęciu widać miejsce, gdzie umieścić kod:
Dodałem klasę thumb do kodu, będziemy go potrzebować, aby wyrównać miniaturę do lewej strony tekstu, a nie nad nim.
Przejdź do /wp-content/themes/my_theme_tmp/css/style.css i dodaj styl:
|
1 2 3 4 5 |
section.is-post .thumb{ width: 200px; height: 200px; float: left; } |
Po dodaniu stylów tekst pod miniaturą jest na swoim miejscu, ale zapisy zaczęły na siebie nachodzić, dzieje się tak z powodu wyrównania pływaka.
Aby wszystko się ułożyło, możemy dodać czyszczenie wyrównania we właściwym miejscu.. Najłatwiej jest przez tag <br clear=”wszystko” />.
Po zakończeniu kodu powinieneś mieć coś takiego:
Funkcje używane w tym samouczku:
the_permalink() - link do pełnego wpisu. Podczas gdy my nie pracujemy, ponieważ musisz zmodyfikować szablon.
jeśli ( has_post_thumbnail() ) { – konstrukcja sprawdza, czy wpis ma miniaturę. Funkcjonować has_post_thumbnail() sprawdza obecność miniatury i zwraca wartość true, jeśli istnieje miniatura.
the_post_thumbnail() - wyświetla miniaturę wpisu o standardowym rozmiarze lub rozmiarze, który określiliśmy w pliku functions.php ( set_post_thumbnail_size( 200, 200, prawdziwy ) ).
funkcja_istnieje( „add_theme_support” ) - sprawdza, czy funkcja w powyższym kodzie została w tym przypadku uruchomiona, funkcja add_theme_support.
add_theme_support( „post-miniatury” ) – dodaje do motywu możliwość pracy w miniaturach.
set_post_thumbnail_size( 200, 200, prawdziwy ) - określa rozmiar miniatury wpisu.
To wszystko. Pobierz moje źródła, zrozum mój kod i zrób to samo dla siebie.
W następnej lekcji omówimy generowanie jednego pełnego rekordu., rozważać, jak utworzyć niestandardowy szablon posta.
/*
- 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.
