• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Tipy do wordpresa cz.1: modyfikacja galerii, dodawanie zdjęć nie związanych z postem, filtrowanie kategorii

Object Storage Arubacloud
+4 głosów
230 wizyt
pytanie zadane 29 listopada 2016 w Nasze poradniki przez ShiroUmizake Nałogowiec (46,300 p.)
  • Wstęp

Trochę o wordpresie , trochę mojej opinii.

Na drodze zawodowowej "każdego" webdewelopera czeka jakiś system CMS. Wordpress jest świętną propozycją, jeżeli wiemy, że klient kiedyś słyszał, że HTML5 wchodzi, a JS-a kojarzy z grą flashową pokroju farm-simulator - czyli wiedzę ma zerową. Wordpress powstał by być jak najbardziej user-friendly. Cokolwiek klient wpisze, będzie to działać i raczej większości wypadków nie otrzyma wyjątku na białym ekranie. Ba! Nawet wielkości miniaturek da się ustawić bezpośrednio interfejsie administratora :).

Niestety tam gdzie są ograniczenia, tam i jest mniejsza wydajność. Aczkolwiek sam wordpress jest łatwy w implementacji, nie waży dużo porównaniu do swoich większych braci CMS. Plus sama nauka(klienta) dodawania postów np: konkretnej kategorii czy galerii i związana z tym wiedza jest łatwa do przyswojenia .Tylko co jakiś czas musimy pilnować by robić update.

Niestety od strony dev już tak to pięknie nie wygląda. Domyślnie wordpress bardzo ogranicza możliwości developerów, jednakże wp udostępnia "interfejs" do konfiguracji wordpresa.

Filtry...

Jeżeli Bóg stworzył coś gorszego niż śmierć i podatki to są to filtry. A dokładnie funkcja:

add_filter( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 );

Dla uproszczenia trzymajmy się tego w kontekście tego tematu, że add_filter usuwa domyślne ustawienia i pozwala nam ustawić własne. Aczkolwiek ta funkcja potrafi znacznie znacznie więcej. Po więcej informacji, zapraszam na:

https://developer.wordpress.org/reference/functions/add_filter/

Nie wspomniałem, że dokumentacja wp jest... (dodaj tu sobie odpowiednie słowo). Co gorsza, beznadziejna pozycjonowana w google. By znależć jakieś sensowne informacje musimy się przedrzeć przez multum linków, owszem związanych z tematem, lecz najczęściej jak to ustawić w kokpicie, a rzadziej w kodzie. Dokumentacja wp często nawet się nie pojawia na pierwszej stronie wyszukiwań. A więc dokumentacja wp , może lizać buty MDN-owi.

To jeżeli jest dlaczego jest taki zły, to dlaczego jest taki modny? Tak jak kiedyś wspominałem jest on user-friendly. Po drugie łatwość implementacji pętli while:post. Po trzecie modyfikalność szablonu i dostosowywanie pod swoje potrzeby. (Raz dobrze napisany szablon, może służyć jako strona firmy IT, osobisty blog itd,- podmiana kolorów to nie jest problem i nie jest tajemnicą poliszynela, że w tym środowisku "mówiąc brutalnie" "kradnię" (lub kupuje się za parę złotych)  się motywy, modyfikuje się i wstawia się jako swoje (znam parę przypadków). Aczkolwiek nie popieram tego.

Nie chcę tu rozpocząć dyskusji czy wp czy Joomla, że wp to kawałek papieru i są lepsze systemy CMS i o wiele lżejsze. Sam osobiście nie lubię wordpressa, choć toleruje jego zachcianki. Jako narzędzie CMS dla stron wizytówek np:firm lub jako blog, owe rozwiązanie sprawuje się świetnie. Aczkolwiek bałbym się na tym postawić jakiś sklep. 

Traktujcie to jako moją opinie i jako marchewkę i kij. Byście wiedzieli jakie są ograniczenia oraz jakie stoją możliwości po stronie wordpressa.

I po ten temat powstał jako zbiór problemów jakie napotkamy przy tworzeniu szablonu i ich możliwych rozwiązań, byście nie musieli szukać i błądzić po internecie. A więc zaczynajmy. 

  • get_template_directory_uri().$urlLink;

Wstawianie zdjęć domyślnie nie dodanych na server.

Wordpress bardzo nie lubi jak dodajemy coś co nie przeszło przez jego łapska. Jako np: obrazki

<img src="img/logo.png" alt="logo" ></img>

Gdy spróbujemy dodać do w ten sposób otrzymamy. Ikonę, że obrazka nie ma.

Dlaczego?

Osobiście do końca sam nie wiem. Domyślam się, że to co wskazujemy jest nieprawdą. Wordpress w inny sposób buduje URL oraz samą strukturę stron.

To co możemy zrobić w sytuacji kiedy chcemy dodać logo? Są na to dwa sposoby:

  • stworzenie np pustego diva i dodanie do niego klasy 'logo'. A klasa CSS 'logo' zawiera:
.logo{
background-image('img/logo.png');
width:200px;
height:auto;
}

Nie jest to najlepsze rozwiązanie. Tworzymy pusty div (a jak wiemy pusty div to zły div). Plus musimy tak manipulować szerokością i długością by nie przecinać zdjęcia. Nie wspomnę, że to jest nie lada problem jeśli chodzi o RWD. Aczkolwiek to działa

 

  • Druga metoda jest o wiele lepsza bo wykorzystamy do tego funkcję get_template_directory_uri()

https://developer.wordpress.org/reference/functions/get_template_directory_uri/

Zadaniem tej funkcji jest wskazanie głównego katalogu szablonu. Załóżmy, że link do naszego obrazku wygląda tak.

.../themes/img/logo.png

Dzięki temu, możemy stworzyć takiego:

function.php

function getLogo ($URL){
  $directoryURL = get_template_directory_uri();
  $concatString = $directoryURL.$URL;
  echo "<img class='img_sub' src=$concatString alt="logo" />";
}

Do funkcji jako argument dołączamy brakujący człon. (nasze "./img/logo.png") . Po połączeniu to z get_template_directory_uri() otrzymujemy pełny link do naszego loga.

 

  • use_default_gallery_style', '__return_false

Włączamy obsługę galerii po naszych własnych regułach CSS.

Od jakiegoś czasu wp , udostępniła nam galerie. Od teraz jeśli chcemy użyć galerii nie musimy posługiwać się wtyczkami lub kocimikombinacjami w function.php. Wystarczy,  proste dodaj dodaj media.

Niestety reguły zawarte w galerii , często mogą nie spełniać kryteria naszego klienta. I my jako solidni developerzy, chcemy spełnić jego pragnienia.  I tu napotykamy pierwszą barierę:

.gallery .gallery-item {
    float: left;
    margin-top: 0;
    text-align: center;
    width: 23%;
}

Nagle nie działa. Wp tak jak wspominałem na początku ma pewne z góry ograniczenia by użytkownik nie spotkał nieoczekiwanych problemów. System ładuje domyślnie własne reguły (jeżeli nie jest to domyślne). Przez co jeżeli nawet takie coś napiszemy, będzie to i tak nie działać.

Jest na to rozwiązanie.

Na początku dodajemy odpowiedni filter:

functions.php

add_filter( 'use_default_gallery_style', '__return_false' );

Od teraz mówimy wordpresowi , że chcemy używać własnych reguł CSS dla galerii.

Od teraz poddany kod powyżej kod zacznie działać.

Warto tu wspomnieć, że wskazany filter nie ma wpływu na wielkość zdjęć tylko dla samej galerii. By móc modyfikować wielkość obrazków (w moim przypadku w wielkości medium) , musimy użyć takiej o to klasy.

.attachment-medium{
    width: 90%;
    height: auto;
  }

Warto to znać, bo pewnych sytuacjach jest to przydatne.

  • in_category('About')

Filtrowanie za pomocą kategorii postów.

Każda sensowna strona posiada index.php. Tak samo ma wordpress. Jednakże istnieje tu pewnien problem, wordpress domyślnie do index.php wrzuca wszystkie możliwe posty. Na głównej stronie raczej chciałbym nie mieć misz-masz wszystkiego. Jest na to rozwiązanie:

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

					<?php

					if (in_category('About') ){
					if ( get_post_gallery() ){
					echo "<div class='gallery' >";
	        echo get_post_gallery();
					echo "</div>";
				 }
				 if (!get_post_gallery()){
					 echo "<article >";

					 echo "<h1 class='title_sub' >";
					 the_title();
					 echo"<h1>";
					 the_content();
					 echo "</article>";
				 }
			 }

Pierwszym warunku sprawdzam czy post jest kategorii About, jeżeli jest wchodzi do warunku sprawdzającego czy zawiera galerię. Jeżeli posiada to ładuje do diva o klasie .gallery zawartośc, jeżeli nie ładuje post do article. Jest to fajny sposób na rozdzielnie galerii od zwykłych postów.

Ten sposób działa tylko dla postów o jednej kategorii.

To narazie tyle. Mam nadzieję, że poradnik się wam przyda i zachęci was do poznania wordpressa :).

PS: Żeby nie było nie jestem ekspertem PHP jak i samego wordpressa. Pewnie są lepsze rozwiązania, jeżeli je znasz podziel się nimi.

 

 

1 odpowiedź

0 głosów
odpowiedź 30 listopada 2016 przez xandros Nałogowiec (29,450 p.)
wybrane 30 listopada 2016 przez ShiroUmizake
 
Najlepsza

 

<img src="img/logo.png" alt="logo" ></img>

Osobiście do końca sam nie wiem. Domyślam się, że to co wskazujemy jest nieprawdą. Wordpress w inny sposób buduje URL oraz samą strukturę stron.

Struktura plików w wp wygląda tak:

 

Root, którego odpytujemy, jest rootem wordpressa. Czyli jakbyś miał obrazek w folderze img, który jest obok wp-content, to by to zadziałało. Style natomiast biorą ich wlasne rooty. Więc jeśli wrzucasz url('./img/jakieszabawnekoty.jpg') do styli w twoim theme, ktore natomiast jest w roocie twojego theme, to obrazek będzie szukało w /wordpress/wp-content/themes/twoj-theme/img/jakieszabawnekoty.jpg.

komentarz 30 listopada 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
Po kręcone, ale przetestuję twój sposob:)

Podobne pytania

+8 głosów
0 odpowiedzi 8,887 wizyt
+10 głosów
0 odpowiedzi 2,401 wizyt
0 głosów
2 odpowiedzi 91 wizyt

92,556 zapytań

141,404 odpowiedzi

319,561 komentarzy

61,942 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...