Wiess Homepage

Pętla (loop) jest podstawą częścią kodu każdego szablonu Wordpressa (theme) i realizuje wyświetlanie wpisów (posts), stron, archiwów. Znajduje się ona w pliku index.php szablonu. Poniższy “kod” wyjaśnia działanie pętli.

<h1>Kod przed pętlą wordpressa.</h1>
<p>Normalny kod, który zawsze się wyświetla tyko raz niezależnie czy są wpisy czy nie.</p>

<?php if (have_posts()) : ?>

<h2>Jeśli są posty do wyświetlenia</h2>
<p>Ten kod wykona się tylko raz przed rozpoczęciem listowania postów.</p>

<?php while (have_posts()) : the_post(); ?> // początek pętli

// wyświetlanie kolejnych postów
<h3><a href="<?php the_permalink() ?>">Tytul: <?php the_title(); ?></a></h3>
<p>Wszystko to co umieszczamy przed treścią wpisu.</p>

<?php the_content(); ?> // ta funkcja wyswietla zawartosc kazdego wpisu

<h4>Wpis #<?php the_ID(); ?>, napisany jest przez <?php the_author(); ?></h4>
<p>Wszystko to co umieszczamy po treści wpisu.</p>

<?php endwhile; ?> // koniec pętli

<h5>Jeśli są posty do wyświetlenia.</h5>
<p>Ten kod wykona się tylko raz po zakończeniu listowania postów.</p>

<?php else : ?>

<p>Jeśli nie ma wpisów</p>
<p>To się wyświetli zamiast wpisów. Wyświetli się raz.</p>

<?php endif; ?>

<h6>Kod za pętlą wordpressa.</h6>
<p>Normalny kod, który zawsze się wyświetla tyko raz niezależnie czy są wpisy czy nie.</p>

Po aktualizacji Wordpressa znajomego okazało się, że zniknęło mnóstwo zdjęć wstawianych przez NextGen Gallery. Dokładniej; jeśli zdjęcia występowały we wpisie w bezpośrednim sąsiedztwie to wyświetlało się pierwsze zdjęcie, natomiast zamiast kolejnych wyświetlał się shortcode np: [singlepic id=123 ...]. Okazało się, że wystarczy edytować post, wstawić spację pomiędzy poszczególnymi shortcode i wszystko wraca do właściwego porządku.
No dobrze, tylko że znajomy ma ponad 2000 wpisów i ponad 4400 zdjęć.
Musiałem więc znaleźć jakieś kompleksowe rozwiązanie. Jedyne rozwiązanie to modyfikacja danych w bazie. Poprzez phpMyAdmina w okienku zapytania SQL wstawiłem kod:
UPDATE wp_posts SET post_content = REPLACE(post_content, '][', '] [');
Ten kod znajdzie każde pole "post_content" w tabeli wp_posts i zamieni "][" na "] [" czyli faktycznie doda spację pomiędzy znacznikami shortcode.

Obrazek można dodać korzystając ze standardowej funkcji, przycisku “Dodaj obrazek” w panelu edycji wpisu. Możemy w takim przypadku dodać obrazek z komputera lub z biblioteki mediów tj. obrazków wcześniej wysłanych na serwer. Obrazek możemy wstawić w oryginalnym rozmiarze lub w kilku predefiniowanych rozmiarach (można je zmienić w Ustawienia/Media). Nową funkcją WP 2.9 jest możliwość edycji obrazków np. kadrowania czy skalowania. Obrazek możemy też wstawić jako miniaturkę (rozmiar definiowany w Ustawienia/Media), która linkuje do oryginalnego rozmiaru.

Ponaddto Wordpress ma fajną funkcjonalność pozwalającą na wyświetlenie prostej galerii we wpisie lub na stronie. Znacznik [gallery] pozwala na wyświetlenie miniaturek obrazków które zostały wysłane na serwer podczas edytowania wpisu.

1. Podczas edycji wpisu wysyłamy obrazki z komputera przy użyciu przycisku “Dodaj obrazek”
2. Zapisujemy ale nie wstawiamy ich do wpisu lub na stronę
3. Robimy tak z kolejnymi obrazkami
4. W treści wpisu dodajemy znacznik [gallery] w miejscu gdzie ma pojawić się galeria

Znacznik ma kilka opcji np:
[gallery columns="4"] – w ilu kolumnach ma się wyświetlać galeria
[gallery id="123"] – wyświetlenie konkretnego obrazka nawet z innego wpisu
[gallery size="medium"] – rozmiar obrazków, domyślnie jest miniaturka
[gallery link="file"] – link do pliku obrazka
[gallery include="10,15"] – pokazuje obrazki o wskazanym id
[gallery exclude="25,28"] – pokazuje galerię z wyłączeniem zdjęć o wskazanych id
CSS galerii możemy zmodyfikować w pliku wp-includes/media.php
Więcej nt. shortcode [gallery] w dokumentacji Wordpressa.
Natknąłem się tu na problem z floatowaniem. Szerokość elementów galerii ustalana jest dynamicznie tj. cała dostępna szerokość jest dzielona przez ilość kolumn. Powoduje to przerzucanie ostatniego elementu do następnego wiersza. Poradziłem sobie z tym trochę hardcorowo, w pliku wp-includes/media.php na linii 733 zmieniłem floor(100/$columns) na floor(90/$columns), w ten sposób zostawiłem wystarczającą ilość miejsca. Wiem, że jest to rozwiązanie mocno nieeleganckie, ale działa. W przyszłości może pomyślę nad czymś odpowiedniejszym.

Brakowało mi tu jeszcze efektu lightboxa. Oczywiście w Wordpressie możemy doinstalować jakąś wypasioną wtyczkę Lightbox. Ja szukałem jednak czegoś lekkiego i prostego. Przymierzałem się do jQuery lightBox plugin według instrukcji Wpninja lub jQuery LightBoxClone. W końcu zdecydowałem się na Slimbox 2.
Dla pojedynczych obrazków atrybut rel="lightbox" adtywujący efekt lightboxa dodajemy ręcznie podczas edycji postów. Natomiast dla galerii tworzonych znacznikiem [gallery] atrybut rel="lightbox-dowolnanazwagalerii" dodajemy przez:

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#gallery-1 a').attr('rel', 'lightbox-galeria1');
$('#gallery-2 a').attr('rel', 'lightbox-galeria2');
})
</script>

Kod umieszczamy w sekcji <head> przed linkiem włączającym slimbox2.js

Można również skorzystać z wtyczki NextGen Gallery, która bardziej kompleksowo załatwi wstawianie obrazków. Opis instalacji i spolszczenie tutaj.
TODO: ikona wpisu

Ktoś powiedział: “ludzie dzielą się na tych, którzy robią backup i na tych którzy będą robić backup”.
Eksport i import bazy wordpressa można wykonać różnymi sposobami i różnymi narzędziami. Podstawowym problemem jest kodowanie polskich znaków.
Znalazłem fajne narzędzie do robienia backupu bazy. Jest to MySQLDumper.
Instalacja: ściągamy skrypt, rozpakowujemy. W moim przypadku przy użyciu gFTP (ubuntu) na serwerze tworzymy folder o dowolnej nazwie np. “mysqldumper”. W tym katalogu tworzymy folder “work”, a w nim kolejne foldery; “backup”, “structure”, “log”, “config”. Wszystkim tym folderom nadajemy prawa 777. W zasadzie skrypt podczas instalacji sam tworzy foldery ale na wielu serwerach mogą wystąpić problemy z prawami dostępu więc lepiej zrobić foldery ręcznie. Do folderu “mysqldumper” przesyłamy pliki skryptu, plikowi config.php nadajemy prawa 777. Teraz w pasku adresu przeglądarki wpisujemy http://www.mojadomena.pl/mysqldumper/install.php . Krótka instalacja; wybór języka i podanie danych do połączenia z bazą i możemy robić backup. Nie będę tego opisywał bo graficzny interfejs jest bardzo prosty. Skrypt machnął mi bazę o wielkości 20MB (tyle miał plik .sql po rozpakowaniu) w 11 sekund do katalogu “backup” skąd ściągnąłem go na dysk za pomocą gFTP. Otwieranie takiego pliku to też wyzwanie dla edytorów ale linuxowy Geany radzi sobie z tym bez problemu. Kodowanie znaków było poprawne.

Logujemy się na panel administracyjny konta hostingowego i uruchamiamy phpMyAdmin. Przechodzimy do bazy naszego Wordpressa i do tabeli xx_users. Teraz w wierszu użytkownika któremu chcemy zmienić hasło edytujemy pole z hasłem. Hasło jest zapisane w postaci zahaszowanej (32-znakowy ciąg liczb i liter).
Wydawałoby się że należy wygenerować hasz nowego hasła. W Ubuntu w terminalu wpisujemy:

echo -n “nowehasło” | md5sum

Otrzymany ciąg znaków wkopiowujemy w pole hasła i logujemy się nowym hasłem do panelu administracyjnego Wordpressa. Niestety! Wordpress 2.9 tego nie łyka.
Na szczęście jest inne rozwiązanie, nawet prostsze. W polu hasła wpisujemy nowe hasło otwartym tekstem i wybieramy z listy rozwijanej funkcję MD5. Akceptujemy i Wordpress sam zahaszuje nam hasło.
Teraz logujemy się skutecznie.

Chodzi tu o zmianę domyślnego formatu linków http://www.jakasdomena.pl/?p=123 (czasami tych parametrów może być więcej) na http://www.jakasdomena.pl/zycie/pierwsza-praca.php.

Takie adresy są dużo bardziej przyjazne dla użytkowników a także są zdecydowanie lepiej traktowane przez wyszukiwarki tj. Google. Ustawienie przyjaznych linków jest najprostszym i stosunkowo efektywnym elementem pozycjonowania.

Aby móc korzystać z przyjaznych linków musimy mieć dostęp do mod_rewrite. Jest to moduł serwera Apache posiadający funkcje przepisywania adresów. Dostęp do niego uzyskujemy poprzez zarządzanie plikiem .htaccess (jakby bez nazwy tylko samo rozszerzenie htaccess po kropce).

Do głównego katalogu Wordpressa wrzucamy przez FTP pusty plik o nazwie .htaccess i zmieniamy mu prawa na 666 (muszą być prawa do zapisu, a po edycji wracamy na 644).

Reguł przepisywania nie musimy ustawiać ręcznie w tym pliku. Zmian dokonujemy w panelu administracyjnym Ustawienia / Bezpośrednie odnośniki i tam wybieramy odpowiedni schemat linków.

Warunek, żeby na serwerze mod_rewrite było włączone (on).

Zmianę najlepiej wykonać od razu po zainstalowaniu Wordpressa ponieważ wyszukiwarki indeksują adresy, i jeśli po pewnym czasie zmienimy je na przyjazne linki to okaże się że nasze adresy podawane w wyszukiwaniach prowadzą donikąd.

Przyznam, że wcześniej nie interesowałem się Custom Fields (polami użytkownika) w Wordpressie chociaż zdawałem sobie sprawę, że takie istnieją. Dopiero testując skórkę, która wykorzystywała je do wstawiania obrazków do postów uznałem, że rzecz jest warta uwagi.
Umożliwiają one dodawanie dodatkowych elementów do wpisów.
Typowe zastosowanie to właśnie dodawanie obrazków do postów, chociaż zastosowań może być znacznie więcej.

Po pierwsze: należy wykonać upload obrazka. Najprościej przez panel administracyjny, zakładka Media / Dodaj nowe, a następnie skopiować ścieżkę.

Po drugie: musimy dodać pole użytkownika do wpisu. Custom Field to para “klucz” i “wartość“. Na stronie edycji wpisu w panelu użytkownika wpisujemy jako “klucz” – “imagepost” a w pole “wartość” ścieżkę do obrazka “/wp-content/uploads/image.gif“. Raz dodany klucz będzie dostępny z listy rozwijanej. Podobnie dodajemy następne pole “klucz” – “imagepost_class” i “wartość” – nazwa klasy css obrazka np. “fotopost“.

Po trzecie: trzeba obrazek wyświetlić w odpowiednim miejscu skórki.
W pliku index.php po rozpoczęciu pętli

if(have_posts()) : while(have_posts()) : the_post();

wstawiamy:

// pobieramy pola użytkownika i wartości przekazujemy do zmiennych
$imagepost = get_post_meta($post->ID, 'imagepost', $single = true);
$imagepost_class = get_post_meta($post->ID, 'imagepost_class', $single = true);

Posty odczytywane są w pętli. Kiedy pętla napotyka informacje z custom fields przekazuje je do zmiennych. Teraz wyświetlamy:
Przed

<?php the_content();  ?> lub <?php the_excerpt();  ?> (treść wpisu lub podsumowanie)

wstawiamy:

<?php // jeśli są obrazki
if($imagepost !== '') { ?>
<p>
<img src="<?php echo $imagepost; ?>"
class="<?php if($imagepost_class !== '') { echo $imagepost_class; } else { echo "left"; } ?>"
/>
</p>
<?php } // end "if"
// jeśli nie ma obrazków
else { echo ''; } ?>

Dla uproszczenia pominąłem atrybut “alt”
Obrazki można wstawiać w dowolnym miejscu np w single.php jeśli obrazek ma się wyświetlać w rozwinięciu wpisy.

W pliku style.css
dodajemy klasę .fotopost i domyślną klasę .feft dla ostylowania obrazka:

.fitopost {
float: left;
width: 100px;
height: 100px;
margin: 0 15px 0 0;
}
.left {
float: left;
margin: 0 15px 0 0;
}

Oczywiście obrazek w tym wpisie dodany jest w opisany sposób.

Lubię Wordpressa, czy na tyle żeby coś o mim napisać? zobaczymy. W każdym razie jest to prosty w użytkowaniu, elastyczny i darmowy system dla każdego. Warto się nim zainteresować. Polecam!