9 Kody WordPress, aby uatrakcyjnić Twój blog i ulepszyć UX

Artykuł napisany przez:
  • WordPress
  • Zaktualizowano: maj 08, 2019

WordPress jest łatwy do skonfigurowania i instalacji, gotowy do pracy zaraz po opublikowaniu bloga.

Ale poleganie na domyślnych opcjach WordPressa może spowodować stratę w Twoim imieniu:

  • Mniejsza funkcjonalność
  • Znudzeni użytkownicy (widzą te same rzeczy na każdej stronie WP, na którą natkną się)
  • Spada w rankingach w wyszukiwarkach.

Masz elastyczne narzędzie w rękach, które możesz zmienić tak, aby uczynić z niego coś przyjemnego w użyciu i wydajnego, na którym możesz polegać. A może chcesz wzbogacić rzeczy dla swoich użytkowników (i siebie)?

Ten artykuł ma na celu pomóc Ci stworzyć swoją witrynę opartą na WordPressie i pomóc jej użytkownikom, dodając ciekawe fragmenty kodu to również poprawi twoje SEO.

Potrzebujesz pomocy urozmaicić swój blog WordPress?
WHSR jest teraz partnerem w Codeable.io, aby pomóc użytkownikom, którzy potrzebują profesjonalnych usług rozwoju / dostosowywania WP.

Aby uzyskać bezpłatną wycenę, proszę wypełnić ten formularz wniosku.

Spróbuj ich i daj mi znać, jak ci się udało! ;)

Kody 9, aby ulepszyć Twój blog WordPress

W tym poście przedstawię dwa rodzaje fragmentów kodu:

  1. Kodeksy kodów
  2. Fragmenty kodu i widżety

Kody kodeksowe to fragmenty kodu PHP, które sam napisałem (z pomocą mojego narzeczonego, Simone), ściśle używając Kodeks WordPress.org jako odniesienie.

Fragmenty kodu i widżety są gotowymi fragmentami kodu PHP (lub wtyczek do WordPress), które są swobodnie dostępne na innych stronach internetowych i na WordPress.org, ale dodałem też fragmenty mojego narzeczonego i napisałem od podstaw, używając otwartych i kodeksowych odnośników.

Oba typy kodów są łatwe do wdrożenia i instalacji, ale możesz zacząć od widżetów i wtyczek, jeśli nie masz pewności, jak manipulować kodem.

Rozumiem, że fragmenty kodu 9 mogą być niewystarczające dla tych, którzy lubią eksperymentować z wieloma różnymi kodami, więc jestem pewien, że nasz Robert Ludrosky's Poręczne fragmenty kodu 25 dla programistów WordPress zaspokoją twój głód (przynajmniej na jakiś czas). ;)

Kodeksy Codex

1. Różnicuj lepkie posty

Aby sprawić, by WordPress sprawdził, czy Twój aktualny wpis jest postem przyklejonym - i wyświetlaj go odpowiednio - możesz użyć funkcji boolowskiej Codex:

<? php is_sticky (); ?>

Sama funkcja zwróci wartości PRAWDA lub FAŁSZ, więc co możesz tutaj zrobić, jeśli napisz konstrukt warunkowy (jeśli / nie), aby zarządzać swoimi lepkimi wiadomościami. Przykład:

<? php if is_sticky () {the_title (); the_time ("M, d, Y"); the_excerpt (); } else {include 'post-template.php'; }

W tym przykładzie użycia wyświetlany post był wyświetlany jako pudełko zawierające tylko tytuł, datę postu i fragment (nie cały post), podczas gdy standardowy szablon dla innych postów jest zawarty w post-template.php.

Każdy typ postu będzie miał własny arkusz stylów CSS, ale nie definiujemy tutaj stylów; tylko szablony.

Single.php jest domyślnym szablonem dla pojedynczych postów (znajdziesz go w każdym domyślnym motywie WP).

Jeśli opracowałeś własny motyw WP, ale nie masz żadnych szablonów dla pojedynczych postów, możesz postępować zgodnie z przewodnikiem po Kodeksie tutaj.

2. Wyświetlanie adresu URL postu

Ten może być fajny do dodania do twojego szablonu. Jeśli chcesz, aby czytelnicy otrzymali identyfikator URI dla każdej ze stron (lub postów), użyj poniższego tagu w szablonie single.php, page.php lub nawet index.php:

<a href="<?php echo get_page_link();?> "> <? php echo get_page_link (); ?> </a>

Zamiast używać the_permalink, który jest najbardziej oczywistym wyborem i działa we wszystkich przypadkach, WP pozwala na użycie dwóch alternatywnych form dla postów i stron:

<? php echo get_post_permalink (); ?>
 <? php echo get_page_link(); ?> 

Na przykład szablon strony może zawierać:

<p> Link: <a href="<?php echo get_page_link();?> "> <? php echo get_page_link (); ?> </a> </ p>

3. Pobierz i wyświetl numer ID postu

Nawet jeśli skonfigurujesz strukturę permalinków jako przyjazną dla użytkownika i SEO, nadal możesz pokazać odwiedzającym identyfikator posta, dodając tę ​​prostą funkcję do swojej linii meta:

<?php the_ID(); ?>

Przykładowe użycie:

<p class = "meta"> Wysłane przez autora. PostID to <? Php the_ID (); ?> </ p>

4. Lista kategorii według identyfikatora

Standardowa funkcja WordPress to:

<? php get_all_category_ids ()?>

Oto przykład, którego użyłem na jednym z moich blogów, napisanym przy użyciu kodu z Kodeks i temat na StackOverflow:

<? php $ category_ids = get_all_category_ids (); foreach ($ category_ids jako $ cat_id) {$ cat_name = get_cat_name ($ cat_id); $ category_link = get_category_link ($ cat_id); // potrzebujemy linku cat, aby URL działał! echo "<a href=\"{$category_link}\"> {$ cat_id} </a>: {$ cat_name} <br/>"; }?>

… I jak to jest wyświetlane:

kod kategorii WP

Uwaga: get_all_category_ids () jest teraz przestarzałą funkcją, ale nadal możesz jej używać bez problemów, tak jak robię to na moim blogu (obrazek powyżej). Jeśli jednak chcesz użyć nowej funkcji dla tego fragmentu, odwiedź stronę Get_terms () strona Kodeksu.

Co robi ten kod?

Kod pobiera wszystkie identyfikatory kategorii i nazwę kategorii dla każdego identyfikatora, następnie łączy identyfikator z linkiem kategorii, a wyświetla nazwę kategorii po ":" - stąd Echo() wyrażenie <a href=\"{$category_link}\"> {$ cat_id} </a>: {$ cat_name} <br/>.

5. Szczegółowa strona użytkowników / autorów Twojego bloga

Czy kiedykolwiek chciałeś stworzyć niestandardową stronę, która wyświetlałaby wszystkich autorów lub użytkowników blogów bez konieczności korzystania z wtyczki?

Cóż, ty mogą stwórz swoją własną stronę autorów / użytkowników, używając tylko edytora tekstu, narzędzia do przesyłania FTP i ulubionego pulpitu WordPress.

Przede wszystkim musisz utworzyć kopię pliku page.php. Zmień nazwę swojej kopii na dowolne imię - nazwałem mine users.php.

dodać tag szablonu na górze tego szablonu, aby WordPress rozpoznał go jako szablon, a następnie przejdź do pulpitu nawigacyjnego -> Strony -> Dodaj nowy i utwórz stronę dla swojej listy użytkowników / autorów. Wróć do listy Strony, kliknij opcję Szybka edycja pod nowym tytułem strony i wybierz nowy szablon z rozwijanego menu Szablon. Zapisz swoje zmiany.

Teraz otwórz plik users.php (lub jakkolwiek go nazwałeś) i zastosuj następujący kod:

 <? php $ result = count_users (); echo 'There are', $ result ['total_users'], 'total users'; foreach ($ result ['avail_roles'] jako $ role => $ count) echo ',', $ count, 'are', $ rola, 's'; Echo '.'; ?> 

Ten kod używa znaku count_users Funkcja jest wymieniona jako "domyślne użycie" w Kodeksie. Możesz zobaczyć przykład tego kodu na żywo http://robocity.in/users/.

Po tym kodzie dodajmy coś o administratorze bloga:

<? php printf (__ ('Liczba postów opublikowanych przez użytkownika "Liderzy":% d', 'text-dom-here'), count_user_posts (1)); ?>

Użyłem count_user_posts Funkcjonowanie tutaj, zgodnie z formatem wykorzystania sugerowanym przez Kodeks.

Funkcja get_userdata dobrze jest pokazać korelację między określoną nazwą użytkownika a prawdziwym imieniem osoby, która go używa. Zobacz poniżej:

<? php $ user_info = get_userdata (1); $ username = $ user_info-> user_login; $ first_name = $ user_info-> first_name; $ last_name = $ user_info-> last_name; echo "$ first_name $ last_name loguje się do ich witryny WordPress z nazwą użytkownika $ username."; ?>

Teraz jest to najciekawsza funkcja, z której możesz korzystać na stronie Autorzy / Użytkownicy - get_users funkcjonować:

<? php $ blogusers = get_users ('blog_id = 1 & orderby = nicename & role = administrator'); // Tablica obiektów WP_User. foreach ($ blogusers jako $ user) {echo '<span>'. esc_html ($ user-> user_login). „-”. esc_html ($ user-> user_email). „</span> <br/>”; }?>

Ta funkcja pobierze listę użytkowników zgodnie z określonymi parametrami, które można skonfigurować w kodzie. W powyższym przykładzie (wziętym ze strony Kodeksu i edytowanym tak, aby pasował do mojej strony Użytkownicy w Robocity.in), chcę uzyskać listę administratorów dla bloga ID 1 (bieżący blog) zamówionego przez 'nicename' i dla każdego użytkownika, Chcę wyświetlić nazwę użytkownika i e-mail w zdaniu typu „Nazwa użytkownika - [Email protected]".

Jeśli chcesz pokazać zalogowanym użytkownikom coś o sobie, możesz skorzystać z get_currentuserinfo funkcja pobierania, powiedzmy, nazwy użytkownika i adresu. Nie użyłem tej funkcji w moim przykładzie, ale kreatywność nie zna granic, prawda? ;)

Fragmenty kodu i widżety

6. Alternatywa ... Archiwum!

ładniejsze archiwa blogówWyobraź sobie, że możesz zastąpić swoją starą listę archiwów na pasku bocznym - która stale rośnie wraz z rosnącym blaskiem i zmusza użytkowników do przewijania - z fragmentem podobnym do tego, który widzisz tutaj po prawej stronie.

Czy nie ułatwiłoby to czytelnikom złapania bloga i głębi archiwum na pierwszy rzut oka? :)

Mój narzeczony i ja napisaliśmy ten prosty fragment za pomocą get_post z Kodeksu i prostego menu rozwijanego dla listy archiwów. Stworzyliśmy własne funkcje, aby pomysł dobrze się ułożył.

<? php function formatPostDate ($ postId, $ format = '% F') {$ post = get_post ($ postId); $ output = strftime ($ format, strtotime ($ post-> post_date)); return $ output; } function getLastPostID () {list ($ post) = get_posts (array ('posts_per_page' => 1)); return $ post-> ID; }?> <p> Ten blog ma posty od <? php echo formatPostDate (1, '% B% e,% Y'); ?>. <br/> Ostatni post został opublikowany na <? php echo formatPostDate (getLastPostID (), '% B% e,% Y'); ?>. </ p> <p> Czy chcesz odwiedzić określone archiwum? </ p> <select name = "archive-dropdown" onchange = "document.location.href = this.options [this.selectedIndex]. value; "> <option value =" "> <? php echo esc_attr (__ (" Wybierz archiwum ")); ?> </ option> <? php wp_get_archives (array ('type' => 'monthly', 'format' => 'option', 'show_post_count' => 1)); ?> </ select>

Co robi ten kod?

Funkcja formatPostDate przyjmuje identyfikator i format daty oraz zwraca datę w wybranym formacie. Druga funkcja, getLastPostID, pobiera tablicę postów zawierających tylko jeden post i zwraca jej identyfikator.

Aby uzyskać pierwszy post na blogu - zazwyczaj z ID = 1, piszemy echo formatPostDate (1, „% B% e,% Y”) w pierwszym akapicie: ten kod używa funkcji formatPostDate i przyjmuje jako parametry identyfikator posta #1 i standardowy angielski format daty i zwraca datę.

Aby uzyskać ostatni post na blogu, używamy formatuPostDate (getLastPostID (), „% B% e,% Y”), aby uzyskać identyfikator ostatniego postu i format daty (ponownie w języku angielskim) i wydrukować datę na ekran.

7. Sprawdź, czy użytkownik korzysta z urządzenia mobilnego

Muneeb w WP-Snippets.com udostępnił interesujący fragment kodu (funkcję), aby sprawdzić, czy użytkownik w Twojej witrynie korzysta z urządzenia mobilnego.

Kod jest dostępny tutaj.

Ta funkcja pomaga w optymalizacji mobilnej, ponieważ jest przydatna, jeśli chcesz pokazać określoną funkcję tylko użytkownikom mobilnym lub wykluczyć użytkowników mobilnych z niektórych funkcji witryny.

8. Użyj instrukcji if / else, aby manipulować zawartością paska bocznego strony

Ten fragment kodu opiera się na Codexie WordPressa, ale umieściłem go w tej sekcji, ponieważ pozwala on na dużo kreatywności i możesz znaleźć gotowe fragmenty w sieci.

Załóżmy, że chcesz użyć wielu pasków bocznych w swojej witrynie. Możesz wypełnić pasek boczny elementami div i sekcjami, ale im bardziej plik się powiększy (nawet jeśli używasz widgetów), tym większy będzie jego rozmiar.

Kodeks przychodzi do ciebie z pomocą get_sidebar ($ name) funkcjonować. Użycie jest proste:

  1. Utwórz (powiedz) pasek boczny dla swoich wycinków cytatów. Nazwij go sidebar-quotes.php
  2. W głównym pliku sidebar.php (lub w pliku nagłówkowym lub indeksowym, zgodnie z twoją strukturą motywu WP) napisz get_sidebar ("quotes"); dołączyć plik "sidebar-quotes.php".

Otrzymasz cieńszy pasek boczny z połączeniami do innych bocznych pasków bocznych, które możesz zoptymalizować za pomocą if / else konstruuje, jeśli znasz trochę kodu PHP dla WordPress.

Być może nie wiesz o tym, ale kiedy użyjesz ogólnego kodu get_sidebar (), będzie on zawierał „sidebar.php”, ponieważ nie dodałeś argumentu $ name. To jest domyślne użycie. Gdy dodasz „-name” po „pasku bocznym * .php”, możesz wywołać ten dodatek addon za pomocą $ name arg.

Jeśli masz reklamy, oferty specjalne lub funkcje paska bocznego, które chcesz wyświetlać na niektórych stronach bloga lub kodu, który spowoduje przeciążenie standardowego paska bocznego, ten fragment kodu będzie źródłem oszczędzania dla UX.

9. Narzędzie do integracji fragmentów kodu w witrynie WordPress

Zrzut ekranu kodów kodów

Fragmenty kodu to darmowa wtyczka WordPress stworzona przez Shea Bange, która pozwala łatwo dodawać fragmenty kodu do bloga.

Zaletą tej wtyczki jest to, że nie musisz już jej edytować functions.php plik, ale możesz dodać niestandardowy kod bezpośrednio z pulpitu WordPress. Zasadniczo możesz dodać fragmenty kodu tak, jakbyś dodał nowy wpis lub stronę.

Tom Ewer na WPMUDev.org napisałem interesujący wstęp do tej wtyczki, ale najbardziej przydatnym zasobem, jaki znalazłem do tej pory w Code Snippets forum wsparcia wtyczek na WordPress.org.

Do Ciebie!

Podziel się swoimi eksperymentami z kodowaniem WordPress w komentarzach poniżej! Możesz też zadawać pytania dotyczące opisów wprowadzonych w tym poście.

O Luanie Spinetti

Luana Spinetti jest niezależną pisarką i artystką mieszkającą we Włoszech oraz pasjonatką informatyki. Ma dyplom ukończenia szkoły średniej w dziedzinie psychologii i edukacji oraz uczestniczyła w kursie sztuki komiksu w ciągu 3, od którego ukończyła studia 2008. Jako wielopłaszczyznowa osoba, tak jak ona, rozwinęła duże zainteresowanie SEO / SEM i Web Marketing, ze szczególnym uwzględnieniem Social Media, i pracuje nad trzema powieściami w języku ojczystym (włoskim), które ma nadzieję indie wkrótce publikuje.