Rejestrujemy nową kolumnę

Domyślnie ekran zarządzania wpisami wygląda tak:

Naszym celem w tym tutorialu, będzie dodanie kolumny zawierającej miniaturę dla każdego wpisu. Zatem pierwsza czynność, którą musimy wykonać, polega na dodaniu nowej kolumny do istniejącej listy, poprzez dodanie fragmentu kodu do pliku functions.php*:

add_filter('manage_posts_columns', 'add_thumbnails_column');

function add_thumbnails_column($columns) {
    $columns['thumbnail'] = __('Miniatura');
    return $columns;
}

Powyższy kod rejestruje kolumnę o nazwie thumbnail dla wpisów.

Wyświetlamy kolumnę ‘thumbnail’

Teraz pozostaje nam tylko wypełnić nową kolumnę treścią i wyświetlić jej zawartość. W tym celu skorzystamy z akcji manage_posts_custom_column. Podpinamy pod nią funkcję, która przyjmuje jeden parametr – nazwę kolumny, którą chcemy manipulować. W naszym przykładzie, w środku znajdzie się kod odpowiedzialny za sprawdzenie czy dany wpis posiada miniaturę i wyświetlenie jej.

add_action('manage_posts_custom_column',  'show_thumbnails_column');

function show_thumbnails_column($column) {
    global $post;

    switch ( $column )
	{
	case 'thumbnail':
            if ( has_post_thumbnail() ){
                echo get_the_post_thumbnail( $post->ID, array(80,80) );
            }else{
                _e('Brak');
            }
	break;
	}
}

Jeśli chodzi o rozmiar miniatury, to w przykładzie postanowiłam wykorzystać obrazek o wymiarach 80x80px. Wartości te można zmienić oczywiście na dowolne inne. Możemy się również posłużyć jednym ze zdefiniowanych na blogu rozmiarów (domyślnych – ‘thumbnail’, ‘medium’, ‘large’, ‘full’ lub własnych), zamieniając kod w linijce 10 na:

echo get_the_post_thumbnail( $post->ID, 'nazwa_rozmiaru' );      

Ostatecznie po wprowadzeniu wszystkich zmian, nasz ekran zarządzania wpisami wygląda tak:

Wyłączamy niechciane kolumny

We wstępie wspominałam, że wtyczki często dodają kolumny z informacjami do ekranu zarządzania wpisami. Na szczęście można je łatwo wyłączyć, klikając Opcje ekranu w prawym górnym rogu (tuż obok Pomocy).

Swoją drogą dojście do tego rozwiązania zajęło mi chwilę, bo do tej pory wydawało mi się że poprzez Opcje ekranu można jedynie włączać i wyłączać całe panele

* Cały kod podany w artykule powinien się znaleźć w pliku functions.php, jednak w tym konkretnym przypadku polecam umieszczenie go w specjalnej wtyczce funkcjonalnej (co to jest wtyczka funkcjonalna i jak ją stworzyć przeczytasz w moim artykule na blogu WP Ninja).

Ostatnio pracowałam nad serwisem, w którym strona główna składała się z trzech bloków treści i kluczową sprawą była możliwość ich edycji przez klienta. Teoretycznie taką funkcjonalność można „zasymulować” z pomocą widgetów oraz sprytnie zdefiniowanych sidebarów, ale na szczęście szybko okazało się że nie ma takiej potrzeby Rzut oka do repozytorium WordPress i znalazłam kilka obiecujących wtyczek. Ostatecznie jednak wypróbowałam dwie,Multiple content blocks i Page.ly MultiEdit i właśnie tą drugą chciałam tutaj przedstawić.

Krok 1. Instalujemy wtyczkę.

Zaczynamy od początku, czyli od instalacji i aktywacji wtyczki w panelu administracyjnym. Wtyczka nie posiada rozbudowanego panelu opcji. W opcji Ustawienia->Multi-Edit mamy jedynie możliwość włączenia obsługi shortocode-ów w zdefiniowanych regionach. Domyślnie opcja ta jest wyłączona.

Krok 2. Tworzymy szablon strony

Wykonaj kopię pliku page.php i zmień jego nazwę na dowolna inną. Na potrzeby tego artykułu stworzymy szablon strony Kontakt z dwoma blokami treści – Left i Right.

<?php
/*
Template Name: Kontakt
MultiEdit: Left,Right
*/
?>

Z punktu widzenia wtyczki page.ly MultiEdit najważniejsza jest druga linijka, gdyż tutaj deklarujemy bloki, z których będziemy korzystać. Nazewnictwo jest dowolne, aczkolwiek nie testowałam, jak wtyczka reaguje na polskie znaki diakrytyczne. Jest to o tyle ważne, że są to równocześnie nazwy regionów wyświetlane w panelu administracyjnym.

Następnie musimy wskazać miejsca w kodzie szablonu, w których powinny zostać wstawione bloki za pomocą poniższego kodu:

<?php multieditDisplay('Left'); ?>

Należy pamiętać, żeby funkcję multiedit() wstawić w środku pętli głównej. W naszym przykładzie mogło by to wyglądać tak:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
		<div class="entry">
			<?php the_post(); ?>
			<div class="left-content">
            <?php multieditDisplay('Left'); ?>
            </div>
            <div class="right-content">
            <?php multieditDisplay('Right'); ?>
            </div>
        </div>
    </div>
<?php endwhile; endif; ?>

Struktura i nazewnictwo klas css jest zupełnie dowolne. Ważne, aby nazwa bloku podana jako argument funkcji multieditDisplay() była zgodna z tą zdefiniowaną w nagłówku.

I jeszcze rzut oka na ostateczny layout:

Krok 3. Tworzymy nową stronę w panelu administracyjnym.

Teraz wystarczy tylko wejść do panelu administracyjnego i utworzyć nową stronę, a następnie wybrać dla niej szablon, który przed chwilą stworzyliśmy. Po zapisaniu kopii roboczej i odświeżeniu strony, naszym oczom ukaże się zmodyfikowany edytor z zakładkami odpowiadającymi naszym regionom.

Zakładka Main Content zawiera główną treść strony (wyświetlaną za w pętli głównej za pomocą funkcji the_post();).

To w zasadzie koniec. Pozostaje nam już tylko uzupełnić treść w poszczególnych zakładkach i zapisać zmiany. W ten sposób stworzyliśmy stronę ze zdefiniowanymi blokami, których treść można swobodnie edytować.

Filtry

W poprzednim wpisie omówione zostały argumenty jakie przyjmuje funkcja comment_form(). Korzystanie z argumentów jest szybką metodą wprowadzenia drobnych zmian w formularzu. Przy zaawansowanych modyfikacjach, może okazać się że podawanie samych argumentów nie wystarczy, nie mówiąc o tym że powstanie dość skomplikowany i/lub nieczytelny kod. W takim przypadku lepszym rozwiązaniem jest wykorzystanie filtrów.

comment_form_default_fields

Podobnie, jak argument fields, filtr comment_form_default_fields pozwala na wprowadzanie zmian w domyślnych polach formularza komentarzy (podpis, email, strona WWW). Z jego pomocą możesz usunąć/zmienić któreś z trzech podstawowych pól lub dodać własne. We wpisie Dodatkowe pola w formularzu komentarzy WordPress, korzystałam właśnie z tego filtra do wyświetlenia dodatkowego pola w formularzu.

comment_form_field_{$name}

Pozwala na wprowadzanie zmian dla jednego, konkretnego pola (spośród trzech podstawowych), którego nazwę podajesz, zamiast {$name}. Dopuszczalne nazwy to author, email, url.

Powiedzmy że naszym celem jest modyfikacja kodu HTML dla pola strona WWW, np. zmiana klasy kontenera (element

).

add_filter( 'comment_form_field_url', 'my_comment_form_field_url' );

function my_comment_form_field_author( $field ) {

 $field = str_replace( 'class="comment-form-url"', 'class="my-url"', $field );

 return $field;
}

comment_form_field_comment

Tak jak arguemnt comment_from odnosi się do pola tekstowego z treścią komentarza. Z pomocą filtra możemy np. zmienić nieco strukturę HTML, wstawiając pole w dodatkowy kontener.

add_filter( 'comment_form_field_comment', 'my_comment_form_field_comment' );

function my_comment_form_field_comment( $comment_field ) {

$comment_field = '<div>' . $comment_field . '</div>';

	return $comment_field;
}

comment_form_logged_in

Filtr, który pozwala na modyfikację komunikatu dla użytkowników zalogowanych. Wykorzystamy go do wyświetlenia specjalnej wiadomości dla użytkowników.

add_filter( 'comment_form_logged_in', 'my_comment_form_logged_in', 10, 3 );

function my_comment_form_logged_in( $logged_in_as, $commenter, $user_identity ) {

	$logged_in_as .= '<p>' . __( 'Czekamy na Twoją opinię, jest dla nas bardzo ważna!' ) . '</p>';

	return $logged_in_as;
}

Jak widzisz, przekazywane są tutaj trzy argumenty, które możemy wykorzystać w naszej funkcji:

• $logged_in_as – kod HTML oraz informacje o osobie zalogowanej (komunikat: Zalogowany jako…). Możemy zmienić jego treść, lub dodać jeszcze jeden komunikat, tak jak w przykładowym kodzie powyżej.
• $commenter – zmienna zawierająca informacje o zalogowanym użytkowniku, wyciągnięte poprzez funkcję wp_get_current_commenter(),
• $user_identity – globalna zmienna reprezentująca aktualnego użytkownika

comment_form_defaults

Filtr ten pozwoli Ci przekazać dowolny argument, z jakim można wywołać funkcję comment_form() (poza zmienną fields, którą możesz nadpisać poprzez filtr comment_form_default_fields). W poniższym przykładzie zmienimy treść komunikatu, wyświetlanego tuż nad guzikiem „Publikuj”.

add_filter( 'comment_form_defaults', 'my_comment_form_defaults' );

function my_comment_form_defaults( $defaults ) {

	$defaults['comment_notes_after'] = __( 'Zanim komentarz zostanie opublikowany, musi go zatwierdzić moderator.' );

	return $defaults;
}

Akcje

Funkcja comment_form() daje duże pole do popisu autorom wtyczek i motywów. Oprócz zestawu argumentów i filtrów do dyspozycji jest jeszcze klika akcji, uruchamianaych w różnych momentach wyświetlania formularza komentarzy. Większość z nich znajdziesz poniżej, dla wygody nałożyłam je na screeenshot formularza. Przykładowy kod znajdziesz na samym końcu tej sekcji, jako że dla wszystkich akcji jego bazowa struktuta jest identyczna.

Poza akcjamjami przedstawionymi na obrazku, istnieją jeszcze trzy, związane z logowaniem i uprawnieniami do komentowania.

comment_form_must_log_in_after

Akcja zostanie uruchomiona tylko gdy użytkownik jest niezalogowany, jeśli dodawanie komentarzy wymaga logowania. Uruchamiana tuż po wyświetleniu wartości dla argumentu must_log_in.

comment_form_logged_in_after

Akcja uruchamiana tylko dla zalogowanych użytkowników, tuż po wyświetleniu wartości dla argumentu logged_in_as.

comment_form_comments_closed

Jedyna akcja uruchamiana, gdy komentowanie jest wyłączone. Wszystkie pozostałe akcje uruchamiane są przy włączonych komentarzach. Jest to w zasadzie jedyny sposób, na wyświetlenie własnego komunikatu w takim wypadku, przykładowy kod poniżej:

add_action( 'comment_form_comments_closed', 'my_comments_closed' );

function my_comments_closed() {
	echo '<p class="comments-closed">' . __( 'Przepraszamy, komentarze są wyłączone dla tego wpisu.' ) . '</p>';
}

Podsumowanie

We wstępie do części pierwszej wspominałam, że cały czas funkcjonuje jeszcze wcześniejszy sposób wstawiania komentarzy. Myślę jendak, że sytuacja zmieni się dosyć szybko. Świadczyć o tym może fakt, że korzystanie z funkcji comment_form() jest jednym z wymogów dla motywów w repozytorium WordPress. Osobiście również nie potrafię znaleźć wad tego rozwiązania. Twórcy szablonów – czas na przesiadkę

Oczywiście dodanie funkcji, nie oznacza, że poprzednia metoda wyszła z użycia. Wiele szablonów, również tych nowych, korzysta ze starszego rozwiązania. W takim przypadku cały kod niezbędny do wyświetlenia formularza znajduje się w pliku comments.php, gdzie można swobodnie edytować teksty, oraz HTML. Dla osób mniej „technicznych” może się to wydawać lepszym rozwiązaniem, ponieważ nawet bez znajomości PHP można stosunkowo łatwo samodzielnie wprowadzać drobne zmiany.

Korzystając z gotowych szablonów masz znikomy wpływ na to, z której metody skorzystał jego twórca. Jednak przy odrobinie cierpliwości, można ujarzmić również funkcję comment_form(), o czym przeczytasz poniżej.

W zależności od tego jak bardzo potrzebujemy ingerować w formularz komentarzy, mamy do dyspozycji dwie podstawowe metody:

• poprzez wywołanie funkcji comment_form() z odpowiednimi argumentami, lub
• korzystając z dostępnych filtrów i akcji.

W tym wpisie skupię się na pierwszej z wymienionych metod.

Argumenty

Podstawowy sposób wywołania funkcji comment_form() nie wymaga podawania żadnych parametrów.

<?php comment_form(); ?>

Wywołanie w ten sposób sprawi, że wyświetlony zostanie formularz komentarzy z domyślnymi ustawieniami.

Funkcję można również wywołać z parametrami:

<?php comment_form($args, $post_id); ?>

$post_id jest ID wpisu dla którego wyświetlany jest formularz. Domyślnie jest to aktualny wpis, więc w większości zastosowań nie ma potrzeby podawania tego parametru.
$args jest tablicą argumentów, za pomocą których kontrolujemy formularz. Jest to zatem klucz do wprowadzania zmian w formularzu i właśnie na argumentach skupimy się tej chwili.

fields

Jest to argument który zawiera tablicę standardowych pól formularza – podpis, email i strona www.
Domyślna wartość:

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );

comment_form(
	array(
		'fields' => array(
					'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Podpis' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" /></p>',
					'email' => '<p class="comment-form-email"><label for="email">' . __( 'E-mail' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" /></p>',
					'url' => '<p class="comment-form-url"><label for="url">' . __( 'Strona WWW' ) . '</label>' . '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',		)
	)
);

W tym przykładzie wywołałam funkcję comment_form() z argumentem fields. Powyższy kod możesz wykorzystać, jeśli potrzebujesz dokonać zmian w kodzie HTML (np. zamienić element p na div lub dodać własną klasę), albo zmienić opis pól.

Możliwe jest również dodanie dodatkowego pola, jednak jest to już bardziej złożone zagadnienie. Jeśli chcesz się dowiedzieć więcej na ten temat, zapraszam do lektury mojego wpisu gościnnego na blogu wpninja.pl, pt. „Dodatkowe pola w formularzu komentarzy WordPress”.

comment_field

Ten argument pozwala na manipulację kodem odpowiedzialnym za wyświetlanie pola tekstowego przeznaczonego na treść komentarza. Tak jak argument fields pozwala na ingerencję w kod HTML oraz zmianę opisu. Domyślna wartość:

comment_form(
	array(
		'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Komentarz', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>'
		)
);

must_log_in

Argument odpowiedzialny za tekst oraz HTML wyświetlany użytkownikom niezalogowanym, jeśli dodawanie komentarzy wymaga logowania. Domyślna wartość:

<?php
comment_form(
	array(
		'must_log_in' => '<p class="must-log-in">' .  sprintf( __( 'Musisz się <a href="%s">zalogować</a>, aby móc dodać komentarz.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>'
		)
);
?>

logged_in_as

Argument odpowiedzialny za wyświetlanie komunikatu dla zalogowanych użytkowników, z linkami do profilu użytkownika oraz do wylogowania. Domyślna wartość:

<?php
comment_form(
	array(
		'logged_in_as' => '<p class="logged-in-as">' . sprintf( __( 'Zalogowano się jako <a href="%1$s">%2$s</a>. <a href="%3$s" title="Wyloguj się z tego konta">Wylogować się?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>'
		)
);
?>

comment_notes_before

Argument, dzięki któremu możesz dodać własny komunikat dla nie zalogowanych użytkowników, wyświetlany tuż nad formularzem. Domyślnie zawiera on informację o tym, że adres email nie zostanie opublikowany a pola wymagane są oznaczone gwiazdką. Domyślna wartość:

<?php
comment_form(
	array(
		'comment_notes_before' => '<p class="comment-notes">' . __( 'Twój adres e-mail nie zostanie opublikowany.' ) . ( $req ? $required_text : '' ) . '</p>'
		)
);
?>

Jeśli nad formularzem nie chcesz wyświetlać żadnego komunikatu, możesz to zrobić korzystając z poniższego fragmentu:

<?php
comment_form(
	array(
		'comment_notes_before' => ''
		)
);
?>

comment_notes_after

Jest to argument który odpowiada za komunikat wyświetlany pod formularzem, tuż pod polem tekstowym a nad przyciskiem publikacji. Domyślnie zawiera informacje o tagach HTML, które można wykorzystywać w treści komentarza. Domyślna wartość:

<?php
comment_form(
	array(
		'comment_notes_after' => '<p class="form-allowed-tags">' . sprintf( __( 'Możesz użyć następujących tagów oraz atrybutów <abbr title="HyperText Markup Language">HTML</abbr>: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>'
		)
);
?>

Tego komunikatu również można się pozbyć, postępując analogicznie jak w przypadku comment_notes_before.

id_form

Argument, który pozwalają na dodanie własnego atrybutu ID do elementu form.
Domyślna wartość:

<?php
comment_form(
	array(
		'id_form' => 'commentform'
		)
);
?>

id_submit, label_submit

Atrybuty, które pozwalają na manipulację przyciskiem publikacji komentarza.
id_submit pozwala zdefiniować własny atrybut ID dla elementu przycisku, natomiast label_submit pozwala zmienić tekst na przycisku. Domyślne wartości:

<?php
comment_form(
	array(
		'id_submit' => 'submit',
		'label_submit' => __( 'Opublikuj komentarz' )
		)
);
?>

title_reply

Tekst nagłówka wyświetlanego nad formularzem (i nad komunikatem comment_notes_before) – jego tutł.
Domyślna wartość:

<?php
comment_form(
	array(
		'title_reply' => __( 'Dodaj komentarz' )
		)
);
?>

title_reply_to oraz cancel_reply_link

Przy włączonej opcji zagnieżdżonych komentarzy, komentujący ma możliwość udzielenia odpowiedzi na konkretną wypowiedź. W takim przypadku można nieco zmienić tekst nagłówek nad formularzem.
W trakcie pisania odpowiedzi do komentarza, wyświetlany jest link pozwalający na anulację odpowiedzi. Jego treść możemy zmienić za pomocą argumentu cancel_reply_link.
Domyślne wartości:

<?php
comment_form(
	array(
		'title_reply_to' => __( 'Dodaj komentarz do %s' ),
		'cancel_reply_link' => __( 'Anuluj pisanie odpowiedzi' )
		)
);
?>

Zastosowanie

Funkcję comment_form() można wywołać z dowolną kombinacją podanych powyżej argumentów, na przykład tak:

<?php
comment_form(
	array(
		'label_submit' => __('Wyślij'),
		'title_reply' => __('Co o ty tym myślisz?')
	)
);
?>

Dla wszystkich pozostałych argumentów, użyte zostaną ich wartości domyślne, które podawałam przy każdym z nich. Informacje na ten temat znajdziesz również w oficjalnej dokumentacji.
We wszystkich przykładach podaję domyślne komunikaty i teksty po polsku (dla WordPress w wersji polskiej).

Podsumowanie

Myślę, że mając taką ściągę z łatwością zapanujesz nad swoim formularzem komentarzy. W części drugiej przeczytasz o nieco bardziej zaawansowanych zagadnieniach, czyli o wprowadzaniu zmian poprzez filtry i akcje.

Wstawienie guzika Google Plus One jest bardzo proste, podstawową instrukcję oraz kreator znajdziesz na oficjalnej stronie - http://www.google.com/intl/pl/webmasters/+1/button/. Do wyboru mamy przycisk w czterech rozmiarach oraz możemy wybrać język, a całość sprowadza się do wstawienia dwóch linijek kodu. Nie wyczerpuje to jednak w pełni możliwości, jakie daje przycisk Google +1. Jeśli nie boisz się odrobiny kodu, możesz dostosować przycisk +1 jeszcze bardziej, m.in możesz wywołać swoją funkcję JavaScript, w momencie gdy ktoś kliknie przycisk. Brzmi to niepozornie, ale w praktyce otwiera nowe atrakcyjne możliwości.

Zanim jednak puścimy wodze fantazji – szklanka zimnej wody, czyli zasady Google

Wydawca nie może bezpośrednio zachęcać użytkowników do klikania przycisku +1, jeśli działanie takie jest mylące dla użytkowników. Wydawca nie może oferować nagród, pieniędzy ani równowartości pieniężnej w zamian za kliknięcie przycisku +1.

Ale na osłodę:

Aby uniknąć wątpliwości – Wydawca może kierować użytkowników do przycisku +1, aby umożliwić im korzystanie ze swoich treści i funkcji oraz powiązań społecznościowych użytkowników.

Co to oznacza dla właściciela strony?

Wpływanie na wyniki wyszukiwania za pomocą guzika +1 jest kuszące, nie można jednak przesadzać. Z zasad jasno wynika, że w zamian za kliknięcie +1 nie można oferować produktów ani usług za które normalnie pobierana jest opłata, ani oferować ich w formie nagród za kliknięcie (sądzę że wszelkie konkursy z nagrodami dla osób które klikną +1 odpadają).

W drugim akapicie czytamy jednak, że można użytkowników „kierować do przycisku +1,  aby umożliwić im korzystanie ze swoich treści i funkcji” – z czego wnioskuję, że akceptowalne jest oferowanie darmowego raportu, badania, ebooka albo innej treści, którego nigdzie nie sprzedajesz osobom które klikną +1 na Twojej stronie.

Z pomocą JavaScript można również dotrzeć do osób, które usuną przyznane +1. Można na przykład zapytać, co je do tego skłoniło, czy możesz coś poprawić – oczywiście tutaj też nie można przesadzać, aby nie być zbyt natrętnym dla użytkowników.

Jak wstawić przycisk Google +1 na swoją stronę?

1. Pierwszy krok polega na wstawieniu odpowiedniego kodu do nagłówka (sekcja <head>, plik header.php):

   <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

2. Następnie przycisk Google +1 wstawiamy w treść strony (w WordPress np. do pliku single.php), za pomocą specjalnego tagu, który w wersji podstawowej wygląda tak:

   <g:plusone></g:plusone>

3. Jeśli wszystko poszło dobrze, na stronie powinien wyświetlać się guzik +1, tak jak ma to miejsce na końcu tego wpisu.

Wykorzystanie parametru callback

Tag <g:plusone></g:plusone> przyjmuje szereg parametrów, np. size który określa rozmiar guzika, href czyli url którego guzik dotyczy, czy wreszcie parametr callback, który pozwala na wywołanie funkcji JavaScript. Pełna lista parametrów, dostępna jest pod adresem http://developers.google.com/+/plugins/+1button/.

Tag guzika Google +1 z parametrem callback wygląda tak:

<g:plusone callback="mojaFunkcja"></g:plusone>

W parametrze callback podałam nazwę funkcji JavaScript – tutaj jest to mojaFunkcja(), która zostanie wywołana, gdy ktoś kliknie przycisk +1. Po wywołaniu funkcja ta otrzyma obiekt JSON, zawierający dwa parametry:

• href, który zawiera adres URL dla którego kliknięty został guzik +1
• state, który zawiera informację o stanie i przyjmuje wartości „on” gdy ktoś dodał +1 i „off” gdy wcześniej przyznane +1 zostało usuniete.

Domyślam się, że dla osób nie obeznanych z JavaScript na razie niewiele z tego wynika. Przejdźmy zatem do przykładu praktycznego.

Przykład: darmowy raport pdf

Tutaj naszym celem jest wyświetlenie na stronie komunikatu z podziękowaniem po kliknięciu +1 oraz linkiem do darmowego raportu pdf.
Na początek krótka uwaga techniczna – aby testować działanie funkcji z poniższego przykładu, musisz być zalogowany na swoje konto w Google +.

1. Przygotuj sobie dokument pdf i wgraj go na serwer. Zanotuj sobie link do tego pliku.
   Następnie wstawiamy ukryty div, który będzie zawierał nasze podziękowanie oraz link. Myślę, że najlepiej wstawić go gdzieś w pobliżu (pod lub nad) guzika +1. Poniżej masz kod, który powinieneś wkleić w treść dokumentu, np. plik single.php (łącznie z kodem przycisku +1):

   <g:plusone callback="mojaFunkcja"></g:plusone><br /> <!-- kod wyświetlający guzik +1 -->
   <div id="secret" style="display:none;border:1px solid #CADCEA; background:#CAE9FD; padding: 10px;"> <!-- ukryty div z linkiem i odrobiną styli: tło i ramka oraz padding -->
   Cieszę się, że podobał Ci się ten wpis. Mam dla Ciebie również ciekawy raport na ten temat, który <a href="http://mojastrona.pl/sciezka/do/pliku.pdf" title="Tytuł">pobierzesz tutaj</a>.
   </div>
   

2. Teraz pora na przygotowanie odpowiedniego kodu JavaScript. Wstawiamy go do nagłówka (plik header.php) najlepiej tuż przed </head>. Kod powinien wyglądać tak:

   <!-- załączamy skrypt pd Google -->
   <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 
   
   <!-- nasza funkcja która obsługuje kliknięcie guzika +1 -->
   <script type='text/javascript'>
   function mojaFunkcja(gpo) {
   	if (gpo.state == "on") {
   		$('#secret').fadeIn(3000);
   	}
   }
   </script>
   

   Kliknij poniższy przycisk, aby zobaczyć powyższy przykład w akcji:
   

   Cieszę się że spodobał Ci się ten wpis

   Jedna uwaga – powyższy kod korzysta z biblioteki jQuery do wyświetlenia ukrytej treści, zatem musi ona być również dołączona w nagłówku. Wiele szablonów WordPress, w tym twentyeleven wykorzystuje jQuery i w takim wypadku biblioteka będzie już załączona. Aby się upewnić, wyświetl źródło swojej strony w przeglądarce (Ctrl + U w Firefoxie) i wyszukaj w frazę „jQuery”. Jeśli się okaże, że twój szablon nie korzysta z jQuery, tutaj możesz pobrać skrypty.

   Powyższy przykład obsługuje tylko dodanie (kliknięcie) +1 na stronie. Gdyby odwiedzający po chwili zmienił zdanie i usunął +1, div z komunikatem pozostał by nadal widoczny.

Na koniec zaznaczę, że jest to dość prosty przykład i link do pobrania pdf nie jest tutaj zabezpieczony w żaden wyszukany sposób – znajduje się on w naszym dokumencie HTML, z tym że jest niewidoczny, do momentu gdy guzik +1 zostanie kliknięty. Nie zmienia to faktu, że osoba sprytna na tyle żeby wyświetlić sobie kod źródłowy strony, będzie w stanie odczytać adres naszego pliku pdf i pobrać go sobie nie klikając +1 na stronie.

Więcej informacji dla developerów na ten temat znajduje się pod adresem http://developers.google.com/+/plugins/+1button/

Podsumowanie

Zadaniem tego wpisu miało być pokazanie możliwości przycisku Google +1. Przykłady podane we wpisie miały za zadanie pokazanie konceptu oraz być inspiracją dla własnych rozwiązań. Mam nadzieję że wszystko jest jasne i zrozumiałe, a jeśli nie to zapraszam do zadawania pytań w komentarzach.

PS. Jeśli podobał Ci się ten wpis, kliknij przycisk +1 poniżej

Timthumb vulnerability scanner

Krok pierwszy to oczywiście pobranie wtyczki Timthumb Vulnerability Scanner z repozytorium WordPress, a następnie dokonaj aktywacji w panelu administratora. Po aktywacji, w pozycji Narzędzia pojawi się nowa opcja – Timthumb scanner.

Cały proces jest maksymalnie uproszczony. Teraz pozostaje nam tylko kliknąć Scan, a wtyczka przeskanuje wszystkie szablony i pokaże podsumowanie. Przy każdym szablonie, który korzysta ze starej wersji skryptu Timthumb wyświetlony zostanie przycisk Fix, za pomocą którego jednym kliknięciem problem zostanie automatycznie naprawiony.

Na koniec chciałam tylko zaznaczyć że wtyczka nie zadziała po fakcie – jeśli Twoja strona została zhakowana na podstawie luki w zabezpieczeniach skryptu Timthumb, musisz samodzielnie posprzątać bałagan A dla spokoju ducha i na wszelki wypadek po prostu pobierz tę wtyczkę i sprawdź swoje szablony!

Zanim jednak przejdę do wtyczki, słów kilka o Dropbox. Dropbox to po prostu dysk internetowy, który umożliwia przechowywanie plików i synchronizację ich z wieloma komputerami. W ramach darmowego konta dostajesz do dyspozycji 2 GB przestrzeni dyskowej na swoje pliki. Jest to narzędzie, które serdecznie Ci polecam, jeśli jeszcze go nie używasz.

A oto w jaki sposób ustawić automatyczne tworzenie kopii zapasowych:

Krok 1: Załóż konto w usłudze Dropbox.

Zrób to teraz, zanim przejdziesz do kolejnego kroku. Jak już wspominałam darmowe konto daje Ci 2 GB przestrzeni dyskowej, co w zupełności wystarczy na potrzeby kopii zapasowych WordPress. Istnieją również płatne konta, które oferują większą przestrzeń, szczegóły znajdziesz tutaj.

Krok 2: Pobierz wtyczkę WordPress Backup to Dropbox.

Wtyczkę znajdziesz bez problemu w repozytorium WordPress. Zainstaluj ją i aktywuj na swoim blogu.

Krok 3: Dokonaj autoryzacji.

Po aktywacji wtyczki przejdź do sekcji Ustawienia ->Backup to Dropbox. Zanim jednak będziesz mógł ją skonfigurować, musisz dokonać aktywacji, aby twój blog mógł się komunikować z Dropbox. Po prostu kliknij guzik „Authorize„.

Zostaniesz przeniesiony na stronę Dropbox, i jeśli jesteś tam akurat zalogowany, nie musisz robić nic więcej. Twoim oczom ukaże się komunikat:

Krok 4: Konfiguracja wtyczki.

To już prawie koniec, wtyczka ma na prawdę niewiele ustawień. Kopie zapasowe będą tworzone i przesyłane na Twoje konto w Dropbox, oraz zapisywane lokalnie (oczywiście możesz zmienić ścieżki). Kopie zapasowe warto wykonywać regularnie, dlatego na samym dole ustawiasz dzień i godzinę oraz jak często operacja ma być powtarzana. Aby wykonać pierwszą kopię nie musisz wcale czekać, na samym dole (tuż obok guzika Save changes) znajduje się guzik  Backup Now, dzięki czemu kopia zostanie wykonana natychmiast. Już po chwili pliki kopii zapasowej powinny się pojawić na Twoim komputerze oraz na koncie Dropbox.

Tutaj jednak mała uwaga – może się zdarzyć że kopie nie będą wykonywane dokładnie w wyznaczonym czasie. Dzieje się tak dlatego, że wtyczka ta nie działa w oparciu o cron, i wymaga abyś w danym momencie był zalogowany do swojego bloga. Nie martw się jednak, bo jeśli akurat minie pora wykonania kopii, zostanie ona wykonana gdy tylko znów zalogujesz się do panelu.

Podsumowanie

Z pomocą wtyczki WordPress Backup to Dropbox wykonasz kopię zapasową całej instalacji, łącznie z plikami core. W związku z tym tworzenie pierwszej kopii może chwilę potrwać, ale już przy kolejnych, nadpisywane będą tylko te pliki, w które zostały w międzyczasie zmienione. Wtyczka wykonuje również zrzut bazy danych do pliku sql. Będzie to plik o nazwie [nazwa bazy danych]-backup.sql, znajdziesz go w folderze wp-content/backups.

A ty w jaki sposób wykonujesz kopie zapasowe?

Aby zainstalować WordPress lokalnie na swoim komputerze, potrzebujesz kilku narzędzi. De facto potrzebujesz przekształcić swój komputer w serwer, instalując odpowiedni zestaw oprogramowania – serwer WWW, silnik baz danych, oraz któryś z języków programowania. Brzmi dość skomplikowanie, zwłaszcza dla początkujących, którzy interesują się WordPressem, a cała reszta to zło konieczne.

Istnieją oczywiście gotowe pakiety, które zawierają niezbędne oprogramowanie w postaci jednego instalatora. Przykładem niech będzie XAMPP, który zawiera w sobie serwer WWW Apache, MySQL, PHP oraz narzędzie do zarządzania bazą danych phpMyAdmin. Jednak w tym przypadku ściągnięcie i instalacja oprogramowania, to dopiero początek. Zanim będziemy mogli zająć się WordPressem, należy go ręcznie zainstalować, a przedtem samodzielnie utworzyć bazę danych. Okazuje się jednak, że można prościej

Czym jest Instant WordPress?

Instant WP to pakiet oprogramowania, który podobnie jak XAMPP zawiera w sobie:

• serwer WWW Apache 2.2.15,
• PHP 5.3.2,
• MySQL 5.1.46,

oraz dodatkowo – WordPress w wersji 3.2. Po pobraniu, wszystkie programy instalowane są po kolei na Twoim komputerze, a efektem końcowym jest lokalna wersja WordPress gotowa do pracy. Autor poszedł nawet krok dalej i podstawową instalację WordPress uzupełnił o przykładowe treści (w odróżnieniu od domyślnej instalacji, która zawiera 1 wpis, 1 stronę i 1 komentarz).

InstantWP tworzy na Twoim komputerze w pełni samodzielną instalację WordPress. Możesz ją swobodnie kopiować, przenosić, zmieniać jej nazwę. Możesz również przegrać ją na przenośny dysk USB i uruchomiać z dowolnego komputera. Instant WP nie instaluje żadnych dodatkowych programów poza swoim folderem instalacyjnym ani nie wprowadza żadnych zmian w rejestrze. Aby go usunąć wystarczy skasować katalog, w którym został zainstalowany, a nie pozostanie po nim żaden ślad na komputerze

Instalacja i korzystanie z InstantWP

Krok 1: Pobierz i zainstaluj InstantWP

InstantWP działa tylko pod Windowsem (XP, Vista, 7). Oprogramowanie znajdziesz na stronie instantwp.com. Ze strony pobierasz plik InstantWP_X.exe. Po uruchomieniu zobaczysz instalator, który poprosi Cię jedynie o wskazanie, w jakim folderze chcesz zainstalować program.

Krok 2: Uruchamianie

W katalogu, który wybrałeś podczas instalacji znajdziesz plik InstantWP.exe. Za jego pomocą uruchamiasz program. Po uruchomieniu wyświetlony zostanie prosty panel, który umożliwia szybki dostęp do podstawowych funkcji.

Panel zostanie uruchomiony domyślnie w Internet Explorerze. Jeśli chcesz aby InstantWP korzystał z innej przeglądarki, np. FireFox, potrzebujesz edytować plik pms_config.ini który znajduje się w folderze iwpserver. Znajdź linijkę:

BrowserPath= ../system/InstantWP_GUI.exe

i zamień na ścieżkę do wybranej przeglądarki, np. tak:

BrowserPath= “C:\Program Files\Mozilla Firefox\firefox.exe”

Krok 3: Poruszanie się po InstantWP

InstantWP posiada prosty panel, który zawiera podstawowe skróty, które ułatwią Ci poruszanie się po WordPressie.

• WordPress Frontpage otwiera stronę główną Twojej lokalnej instalacji WordPress w przeglądarce (domyślnie IE)
• WordPress Admin otwiera panel administracyjny WordPress (użytkownik: „admin”, hasło: „password”)
• Plugins Folder, Themes Folder otwiera folder plugins lub themes Twojej lokalnej instalacji za pomocą eksploratora Windows
• MySQL Admin otwiera w przeglądarce panel zarządzania bazą danych PHPMyAdmin
• Documentation jest linkiem do oficjalnej dokumentacji na stronie internetowej InstantWP

Krok 4: instalacja szablonów i wtyczek

Można to zrobić na dwa sposoby, ręcznie lub automatycznie. Automatyczne wyszukiwanie i instalowanie wtyczek oraz szablonów nie wymaga chyba dodatkowych objaśnień – wszystkie czynność wykonamy z poziomu panelu administracyjnego WordPress (szablony poprzez Appearance, zakładka Install Themes, wtyczki poprzez Plugins -> Add new).

Aby zainstalować wtyczkę lub szablon ręcznie:

1. Pobierz ją na swój komputer i rozpakuj.
2. W panelu InstantWP kliknij Plugins Folder lub Themes Folder. Możesz również przejść do odpowiedniego katalogu z za pomocą np. Total Commander. W tym celu przejdź do folderu, w którym zainstalowałeś InstantWP, a następnie \iwpserver\htdocs\wordpress\wp-content\themes lub \iwpserver\htdocs\wordpress\wp-content\plugins i skopiuj tam rozpakowane pliki.
3. Przejdź do panelu administracyjnego swojej lokalnej instalacji WordPress i aktywuj wybrane wtyczki/szablony.

Krok 5: Aktualizacja WordPress

Podsumowanie

Aktualnie jestem na etapie testowania InstantWP i jak na razie jestem bardzo zadowolona. Na potrzeby osób zaczynających swoją przygodę z WordPress wydaje się być rozwiązaniem idealnym, chociaż z punktu widzenia web developera, pewnie jest to bardziej ciekawostka. W każdym razie moim zdaniem, warto przynajmniej zapoznać się z InstantWP. Co Ty o tym myślisz?

Jeśli nie odpowiada Ci żadna z powyższych opcji, za pomocą krótkiego fragmentu kodu, możesz dodać do tej listy swój awatar.

Krok 1

Poniższy kod wklej do pliku functions.php:

if ( !function_exists('fb_addgravatar') ) {
	function fb_addgravatar( $avatar_defaults ) {
		$myavatar = get_bloginfo('template_directory') . '/images/avatar.gif';
		$avatar_defaults[$myavatar] = 'Czytelnicy';
		return $avatar_defaults;
	}
	add_filter( 'avatar_defaults', 'fb_addgravatar' );
}

Krok 2

Zanim wgrasz plik functions.php na serwer, musisz pamiętać jeszcze o stworzeniu obrazka awatara, i wrzuceniu go do odpowiedniego katalogu. W podanym przykładzie obrazek o nazwie avatar.gif powinien znaleźć się w katalogu images szablonu którego aktualnie używasz. Obrazek powinien mieć rozmiar 64×64 pixele.

Jeśli tylko prawidłowo podałeś ścieżkę do pliku, po wejściu w Ustawienia->Dyskusja na liście pojawi się nowa pozycja:

Jeśli jednak jeden awatar to dla Ciebie za mało, możesz stworzyć ich dowolną ilość i wyświetlać je losowo lub wręcz generować na podstawie obrazków za pomocą wtyczki Ravatar, którą oczywiście pobierzesz z repozytorium WordPress.

the_content()

Jest to funkcja odpowiedzialna za wyświetlanie pełnej treści wpisów, wykorzystywana gdy wyświetlany jest pojedynczy wpis lub strona. Można ją jednak wykorzystać również do wyświetlania streszczenia na stronie głównej i innych stronach zbiorczych, np. kategorii, tagów itd. Aby tego dokonać, wpisy powinny zawierać specjalny znacznik <!--more-->, który wstawiasz w odpowiednim miejscu w treści, za pomocą guzika w edytorze.

Wtedy na stronie głównej zamiast całego wpisu, zostanie wyświetlony tylko fragment, znajdujący się przed znacznikiem <!--more-->, a jeśli go nie wstawisz, pełna treść. Fragment będzie wyświetlany z zachowaniem wszelkiego formatowania, obrazków, linków itd. Na końcu fragmentu znajdzie się link do pełnej wersji wpisu.

Domyślnie (tj. jeśli szablon którego używasz nie modyfikuje tego zachowania w żaden sposób) link do pełnego wpisu ma postać ‘(more…)’ w wersji angielskiej WordPressa, lub ‘(więcej…)’ w wersji polskiej.

Tekst linka oczywiście można zmienić, podając jego treść jako parametr dla the_content():

<!--?php the_content("Czytaj dalej..."); ?-->

czego efektem będzie link z tekstem „Czytaj dalej…”.
Można również pójść krok dalej, i zmienić wygląd naszego linka. Wystarczy skorzystać z poniższego kodu:

<!--?php the_content('<span class="more"-->Czytaj dalej...'); ?>

a następnie dodać odpowiednie deklaracje dla klasy ‘more’ w pliku CSS.

the_excerpt()

the_excerpt() jest odpowiedzialny za wyświetlanie streszczenia (wypisu) artykułu. Może on zostać stworzony na kilka sposobów, które mają jednak dwie cechy wspólne (które zwykle są powodem pytań i nieporozumień):

• wypisy są pozbawiane HTML, a więc korzystając z the_excerpt wyświetlony zostanie sam tekst, a wszelkie formatowanie, obrazki, linki itd. będą usunięte,
• domyślnie, pod streszczeniem nie ma linka do pełnej wersji artykułu. Można go jednak dodać samodzielnie, o czym przeczytasz poniżej.

Opcja 1: Streszczenie tworzone ręcznie

W trakcie edycji wpisu, poniżej głównego pola tekstowego, znajduje się mniejsze pole tekstowe oznaczone jako Wypis (ang. Excerpt). Służy ono ręcznemu tworzeniu streszczenia wpisu, który ma za zadanie zachęcić do przeczytania pełnego artykułu. Jeśli nie widzisz tego pola, podczas edycji wpisu kliknij Opcje ekranu w prawym górnym rogu i zaznacz przy polu Wypis.

Po co miałbyś osobno tworzyć tekst streszczenia?

Dobrze napisane abstrakty mogą potencjalnie być bardziej zachęcające, niż te generowane automatycznie. Dodatkowo taki abstrakt można wykorzystać również w znaczniku meta description (sporo szablonów właśnie tak robi) na stronie wpisu, co może pozytywnie wpłynąć na ilość osób odwiedzających twoją stronę z wyszukiwarek. W tym kontekście pamiętaj jednak, że wypis nie powinien być dłuższy niż 160 znaków.

Opcja 2: Streszczenie automatyczne

Jeśli korzystasz z the_excerpt() i sam nie stworzysz Wypisu, zostanie on wygenerowany automatycznie. Będzie to pierwsze 55 słów wpisu. Aby zmienić domyślną długość, dodaj następujący kod do pliku functions.php:

function moje_streszczenie($length) {
	return 30;
}
add_filter('excerpt_length', 'moje_streszczenie');

Powyższy kod skróci automatycznie generowany wypis do 30 słów.

Opcja 3: Wypisy na podstawie znacznika <!--more-->

the_excerpt() również potrafi tworzyć wypisy na podstawie znacznika <!--more-->umieszczonego w treści. W tym przypadku jednak zasadnicza różnica, w stosunku do zastosowania the_content() w połączeniu ze znacznikiem <!--more--> polega na tym, że wyświetlony zostanie sam tekst, a na końcu nie będzie linka do pełnej wersji wpisu.

Pamiętaj, że nawet jeśli twój szablon wykorzystuje the_excerpt(), nie musisz ręcznie tworzyć Wypisów. Hierarchia jest następująca:

1. Jeśli istnieje Wypis zdefiniowany ręcznie, zostanie on wyświetlony, niezależnie od tego czy wpis zawiera znacznik <!--more-->, czy nie. Nie ma tu znaczenia również ustawiona długość wypisu.
2. Jeśli nie istnieje ręczny wypis, ale w trakcie edycji wpisu, wstawiłeś znacznik <!--more-->, fragment ten zostanie wykorzystany jako wypis. Jeśli zdefiniowałeś maksymalną ilość słów, a stworzony w ten sposób wypis ją przekroczy, zostanie on przycięty.
3. Jeśli nie istnieje ręczny wypis, ani nie wstawiłeś znacznika <!--more-->, zostanie on wygenerowany automatycznie (domyślnie długości 55 słów).

function new_excerpt_more($more) {
       global $post;
	return '<a href="'. get_permalink($post->ID) . '">Czytaj dalej...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

Mam nadzieję, że po lekturze tego wpisu, wiesz już czym się różni the_content() od the_excerpt() oraz wiesz, który bardziej odpowiada Twoim potrzebom. W razie dodatkowych pytań, zostaw komentarz poniżej.