Jeśli dosyć często publikujesz na blogu recenzje hoteli, restauracji czy kawiarni i zależy Ci na ocenie opisywanych miejsc przy podsumowaniu tekstu – ten wpis jest dla Ciebie. Najdokładniej opisanie miejsca są cenną informacją dla odbiorców Twojego bloga, jednak znając sposób w jaki konsumowane są strony internetowe (wchodzę – znajduję informację lub nie – wychodzę), może to być rozwiązanie niewystarczające. Niektórzy spośród Twoich czytelników będą chcieli zdać się na Twoją opinię i zechcą sprawdzić ile dałeś gwiazdek danej lokalizacji.

Po lekturze tego wpisu każdy artykuł będziesz mógł zakończyć wpis na jeden z dwóch przygotowanych przeze mnie sposobów:

Wariant 1

Aby uzyskać ocenę prezentowaną w wariancie pierwszym należy wejść do sekcji Wygląd -> Edytor -> single.php w którym znajduje się komenda odpowiadająca za wyświetlanie treści wpisu (najczęściej jest to the_content(); ale są motywy korzystające z niestandardowych poleceń). Gdyby się okazało, że w single.php nie ma tego wywołania, wtedy trzeba poszukać w motywie pliku, który go posiada. Najczęściej tego typu pliki znajdują się w katalogach /templates, /includes,/template-parts  lub innych.

Po znalezieniu <?php  the_content(); ?> wystarczy wkleić poniżej fragment kodu, który odpowiada za wyświetlenie właściwej ilości gwiazdek:

<?php if( !empty( get_post_meta( $post->ID, 'gwiazdki', true ) ) ) : ?>
 

<div class="ocena">
<h5>Moja ocena:</h5>

<span class="separator"></span>

<ul class="gwiazdki"><?php $rate = (int)get_post_meta($post->ID, 'gwiazdki', true); 
 for($i=1; $i<6; $i++) {
 if($i <= $rate) {
 echo '
<li class="gwiazda"><i class="fa fa-star"></i></li>

';
 } else {
 echo '
<li class="gwiazda"><i class="fa fa-star-o"></i></li>

';
 } 
 }
?></ul>


<?php endif; ?>

[wc_accordion collapse=”1″ leaveopen=”0″ class=”” layout=”box”]

[wc_accordion_section title=”W jaki sposób działa powyższy kod?”]

Powyższy fragment kodu działa w oparciu o Własne Pola (Custom Post Types) czyli standardową funkcjonalność dodaną w WordPressie 3.0. W pierwszej linii sprawdzamy czy do wpisu dodane jest Własne Pole o nazwie „gwiazdki” z określoną wartością. Jeśli tak to wyświetlane są linie od 3 do 13. W linii 5 pobierana jest liczba gwiazdek zaś w kolejnej linii wykonywana jest prosta pętla polegająca na wyświetlaniu odpowiedniej ilości gwiazdek zamalowanych oraz pustych – zależnie od tego, co wpiszesz w edycji wpisu.

Jeśli zamierzasz edytować wklejony kod to przyjrzyj się linii 3 – możesz zmienić „Moja ocena:” na inną nazwę. Ponadto w linii 1 i 5 możesz zmienić frazę 'gwiazdki’ na dowolną, pamiętając przy tym aby zmienić ją w tych dwóch miejscach. W tym przypadku moim zdaniem nie jest to szczególnie potrzebne, bo 'gwiazdki’ są wewnętrzną nazwą, której odbiorcy Twojej strony i tak nie zobaczą.

[/wc_accordion_section]

[/wc_accordion]

W pliku ze stylami CSS (np. style.css) należy dodatkowo umieścić kod odpowiadający za wyświetlenie gwiazdek jedna obok drugiej na środku kolumny z treścią:

.ocena h5 {
	text-align: center;
	color: #555555;
        margin-bottom: 0;
}

.ocena 
.separator {
        width: 145px;
        height: 1px;
        margin: 0 auto;
        display: block;
        border-bottom: 1px solid #555555;
}

ul.gwiazdki {
	padding: 0;
	display: table;
        margin: 5px auto 5px auto;
}

.gwiazdki .fa {
	color: #555!important;
	float: left;
}

.gwiazdki li {
	list-style-type: none;
	float: left;
	margin-right: 3px;
	display: inline;
}

To zasadniczo powinno wystarczyć aby umieścić prostą ocenę na Twojej stronie. Gdyby jednak to było za mało – zobacz bardziej złożony wariant na ocenę np. restauracji czy kawiarni.

Wariant 2

Podobnie ja w przypadku pierwszego wariantu powinieneś wejść do sekcji Wygląd -> Edytor single.php w którym znajduje się komenda odpowiadająca za wyświetlanie treści wpisu (najczęściej jest to the_content(); ale są motywy korzystające z niestandardowych poleceń). Gdyby się okazało, że w single.php nie ma tego wywołania, wtedy trzeba poszukać w motywie pliku, który go posiada. Najczęściej tego typu pliki znajdują się w katalogach /templates, /includes,/template-parts  lub innych.

Po znalezieniu <?php  the_content(); ?> wystarczy wkleić poniżej fragment kodu, który odpowiada za wyświetlenie właściwej ilości gwiazdek:

<div class="zaawansowana-ocena">

<h5>Moja ocena:</h5>


<div class="tlo-ocen">
 
<!-- PIERWSZA CECHA -->
<?php if( !empty( get_post_meta( $post->ID, 'kawa', true ) ) ) : ?>

<ul class="gwiazdki">

<li class="etykieta">Kawa:</li>

<?php $rate = (int)get_post_meta($post->ID, 'kawa', true);
for($i=1; $i<6; $i++) {
if($i <= $rate) {
echo '
<li><i class="fa fa-star"></i></li>

';
} else {
echo '
<li><i class="fa fa-star-o"></i></li>

';
}
}
?>
</ul>

<?php endif; ?>
 
<!-- DRUGA CECHA -->
<?php if( !empty( get_post_meta( $post->ID, 'lunch', true ) ) ) : ?>

<ul class="gwiazdki">

<li class="etykieta">Lunch:</li>

<?php $rate = (int)get_post_meta($post->ID, 'lunch', true);
for($i=1; $i<6; $i++) {
if($i <= $rate) {
echo '
<li><i class="fa fa-star"></i></li>

';
} else {
echo '
<li><i class="fa fa-star-o"></i></li>

';
}
}
?>
</ul>

<?php endif; ?>
 
<!-- TRZECIA CECHA -->
<?php if( !empty( get_post_meta( $post->ID, 'obsługa', true ) ) ) : ?>

<ul class="gwiazdki">

<li class="etykieta">Obsługa:</li>

<?php $rate = (int)get_post_meta($post->ID, 'obsługa', true);
for($i=1; $i<6; $i++) {
if($i <= $rate) {
echo '
<li><i class="fa fa-star"></i></li>

';
} else {
echo '
<li><i class="fa fa-star-o"></i></li>

';
}
}
?>
 
</ul>

<?php endif; ?>
</div>

<!-- OCENA CALOSCIOWA -->

<div class="procentowa-ocena"><?php $rate = (int)get_post_meta($post->ID, 'procentowa-ocena', true); echo $rate ?>%</div>

 
</div>


<div class="clear"></div>

[wc_accordion collapse=”1″ leaveopen=”0″ class=”” layout=”box”]

[wc_accordion_section title=”W jaki sposób działa powyższy kod?”]

Powyższy fragment kodu działa w oparciu o Własne Pola (Custom Post Types) czyli standardową funkcjonalność dodaną w WordPressie 3.0. W 5 linii sprawdzamy czy do wpisu dodane jest Własne Pole o nazwie „kawa” z określoną wartością. Jeśli tak to wyświetlane są linie od 7 do 19. W linii 10 pobierana jest liczba gwiazdek zaś w kolejnej linii wykonywana jest prosta pętla polegająca na wyświetlaniu odpowiedniej ilości gwiazdek zamalowanych oraz pustych – zależnie od tego, co wpiszesz w edycji wpisu. W kolejnych linijkach zatytułowanych „DRUGA CECHA” i „TRZECIA CECHA” znajdują się kolejne pola z gwiazdkami. Ostatni element to linia 57 i 68 prezentująca procentową wartość nazwaną „OCENĄ CAŁOŚCIOWĄ”.

[/wc_accordion_section]

[/wc_accordion]

W pliku ze stylami CSS (np. style.css) należy dodatkowo umieścić kod odpowiadający za wyświetlenie gwiazdek jedna obok drugiej na środku kolumny z treścią:

ul.gwiazdki {
	padding: 0;
	display: table;
        margin: 5px auto 5px auto;
}

.gwiazdki .fa {
	color: #555!important;
	float: left;
}

.gwiazdki li {
	list-style-type: none;
	float: left;
	margin-right: 3px;
	display: inline;
}

.gwiazdki li.etykieta {
	width: 100px;
	margin-top: -4px;
}

.tlo-ocen {
	background-color: #F9F9F9;
        width: 75%;
        float: left;
	display: block;
	margin-bottom: 20px;
	padding: 15px 0;
}

.zaawansowana-ocena h5 {
	color: #555555;
	margin-bottom: 10px;
}

.zaawansowana-ocena ul.gwiazdki {
	padding: 0;
	display: table;
	margin-left: 20px;
	width: 70%;
}

.procentowa-ocena {
        float: right;
        width: 25%;
        font-size: 50px;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        background-color: #555555;
        padding-top: 45px;
        height: 116px;
}

.clear {
	clear: both;
}

Wyświetlenie gwiazdek we wpisie

Niezależnie od tego czy wybrałeś wariant pierwszy czy drugi – sposób na wyświetlenie gwiazdek pod treścią wpisu jest bardzo podobny. Kiedy już wkleisz w odpowiednim miejscu kod odpowiadający za wyświetlenie wariantu z gwiazdkami oraz uzupełnisz style CSS, pozostało Ci tylko dodać własne pole i … gotowe.

Na samym początku niezależnie od wariantu przejdź do dodawania/edycji wpisu w którym chcesz wprowadzić gwiazdki i korzystając z Opcji Ekranu (przylepiony do górnej krawędzi rozwijany panel) włącz widoczność Własnych Pól:

Następnie postępuj według wskazówek dla konkretnego wariantu:

Dla wariantu 1

Wejdź do wpisu, w którym masz zamiar dodać ranking z gwiazdkami. Następnie dodaj nowe własne pole, nazwij je 'gwiazdki’ jeśli nie modyfikowałeś kodu PHP z początku opisu wariantu 1 i wprowadź wartość od 1 do 5, gdzie 1 to jedna gwiazdka zamalowana, a 5 – wszystkie gwiazdki. Po zaktualizowaniu wpisu pod tekstem powinien pojawiać się prosty ranking.

Zmiana wartości wpisanej we własnych polach zmieni ilość podświetlonych gwiazdek. I dobra informacja dla wszystkich, którzy chcą szybko edytować witrynę – po pierwszym wpisaniu cecha 'gwiazdki’ w ramach własnych pól będzie dodana w liście rozwijanej na stałe tzn. będzie można ją wybierać z listy. Dzięki temu unikniesz ciągłego dodawania cech.

Dla wariantu 2

Wejdź do wpisu, w którym masz zamiar dodać ranking z gwiazdkami. Następnie dodaj nowe własne pola, nazwij je kolejno 'kawa’, 'lunch’, 'obsługa’ oraz 'procentowa-ocena’ jeśli nie modyfikowałeś kodu PHP z początku opisu wariantu 2 i wprowadź dla pierwszych trzech pozycji wartość od 1 do 5, gdzie 1 to jedna gwiazdka zamalowana, a 5 – wszystkie gwiazdki. Następnie wprowadź wartość od 1 do 100 dla cechy 'procentowa-ocena’. Po zaktualizowaniu wpisu pod tekstem powinien pojawiać się złożony z kilku pozycji ranking z gwiazdkami.

Zmiana wartości wpisanej we własnych polach zmieni ilość podświetlonych gwiazdek. I dobra informacja dla wszystkich, którzy chcą szybko edytować witrynę – po pierwszym wpisaniu nazwy cechy w ramach własnych pól ta cecha będzie dodana w liście rozwijanej na stałe tzn. będzie można ją wybierać z listy. Dzięki tej prostej funkcjonalności w wygodny sposób będziesz uzupełniać cechy w kolejnych wpisach.

Jak zmieniać ilość gwiazdek?

Zasada jest bardzo prosta i dotyczy zarówno wariantu 1 jak i 2. Domyślnie w podanych powyżej przykładach wyświetlanych jest 5 gwiazdek. Gdybyś chciał aby wyświetlało się np. 10, wtedy we wklejanym w single.php kodzie znajdź:

 for($i=1; $i<6; $i++) { 

a następnie podmień wartość i<6 na i<11

Dzięki temu wyświetli się 10 gwiazdek, a podczas edytowania wpisów będziesz mógł poszczególnym cechom nadawać wartość od 1 do 10.

Dlaczego 11? Pętla działa w ten sposób, że wykonywana jest 10 razy. Pod $i podstawiane jest kolejno 1, 2, 3 … aż do 10. W momencie kiedy $i=11 sprawdzane jest 11 < 10 a ponieważ jest to równanie sprzeczne, dlatego pętla jest zakończona i nie wyświetla się żadna nadprogramowa gwiazdka. Dlatego zmieniając tą wartość należy pamiętać, że jeśli chcesz 10 gwiazdek to zamieniasz tę linijkę na:

 for($i=1; $i<11; $i++) { 

Jeśli jednak chcesz np. 15 gwiazdek to powinieneś wpisać:

 for($i=1; $i<16; $i++) { 

czyli za każdym razem musisz podawać ilość gwiazdek jakie chcesz wyświetlić plus jeden.

Teraz nie zostaje Ci nic innego niż zaplanować własny system ocen i wdrożyć go do swojej strony. Powodzenia!

Co jeśli gwiazdki się nie wyświetlają?

Wyświetlanie gwiazdek możliwe jest tylko i wyłącznie w momencie, kiedy pod stronę podłączony jest plik CSS od Font Awesome. FA to biblioteka zawierająca zbiór ikon, które można po podłączeniu pliku w bardzo prosty sposób wyświetlić. Instrukcja oraz plik do pobrania znajduje się tutaj. Część motywów ma domyślnie podpięty Font Awesome, więc nie będzie konieczności jego powtórnego podłączenia.

Gdyby się okazało, że gwiazdki są widoczne jedna pod drugiej zamiast jedna pod drugą – sprawdź czy kod CSS został poprawnie wklejony i następnie po wejściu na wpis z gwiazdkami spróbuj odświeżyć stronę Ctrl + F5 (lub ⌘ + R w Safari na OS X)