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

Artykuł napisany przez: Luana Spinetti
  • WordPress
  • Zaktualizowano: Oct 26, 2020

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.

Kodeksy Codex

1. Różnicuj lepkie posty

Aby WordPress sprawdził, czy Twój aktualny post jest przyklejony - i odpowiednio go wyświetlić - 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:

">

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_page_link(); ?> 

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

Połączyć:

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">Posted by Author's Name. Post ID is <?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:

{$ cat_id}: {$ cat_name} ";}?>

… I jak jest wyświetlany:

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 łączem kategorii, podczas gdy wyświetla nazwę kategorii po znaku „:” - stąd Echo() wyrażenie {$ cat_id} : {$ cat_name}.

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ę swojego pliku page.php. Zmień nazwę swojej kopii na dowolną - nazwałem moją users.php.

Add 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'] as $role => $count)
 echo ', ', $count, ' are ', $role, 's';
 echo '.';
 ?> 

Ten kod używa znaku count_users funkcja jest wymieniona jako „domyślne użycie” w Kodeksie. Możesz obejrzeć przykład tego kodu na żywo pod adresem http://robocity.in/users/.

Po tym kodzie dodajmy coś o administratorze bloga:

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:

login użytkownika; $ first_name = $ user_info-> first_name; $ last_name = $ user_info-> last_name; echo "$ first_name $ last_name loguje się do swojej witryny WordPress z nazwą użytkownika $ username."; ?>

To najciekawsza funkcja, której możesz użyć na swojej stronie Autorzy / Użytkownicy - plik get_users funkcjonować:

”. esc_html ($ user-> user_login). „-”. esc_html ($ user-> user_email). ' '; }?>

Ta funkcja pobierze listę użytkowników zgodnie z określonymi parametrami, które możesz skonfigurować w kodzie. W powyższym przykładzie (pobranym ze strony Codex i zmodyfikowanym tak, aby pasował do mojej strony Użytkownicy w Robocity.in), chcę uzyskać listę administratorów bloga o identyfikatorze 1 (bieżący blog) uporządkowaną według „nazwy użytkownika” i dla każdego użytkownika, Chcę wyświetlić nazwę użytkownika i adres e-mail w zdaniu typu „Nazwa użytkownika - [email chroniony]".

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. Alternatywnie… Archiwa!

ładniejsze archiwa blogówWyobraź sobie, że możesz zastąpić swoją starą listę archiwów paska bocznego - która rośnie wraz z rozwojem bloga i zmusza użytkowników do przewijania - fragmentem takim jak ten, który możesz zobaczyć 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ł.

Data wysłania)); return $ output; } function getLastPostID () {list ($ post) = get_posts (array ('posts_per_page' => 1)); return $ post-> ID; }?> Ten blog zawiera posty od . Ostatni post został opublikowany dnia . Chcesz odwiedzić określone archiwum? 'miesięcznie', 'format' => 'opcja', 'show_post_count' => 1)); ?>

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 otrzymać pierwszy post na blogu - generalnie 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, a następnie zwraca datę.

Aby uzyskać ostatni post na blogu, używamy formatuPostDate (getLastPostID (), '% B% e,% Y'), aby uzyskać identyfikator ostatniego posta i format daty (ponownie w języku angielskim) i drukujemy datę w 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 wyświetlać 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 ze strukturą Twojego motywu WP) napisz get_sidebar („cudzysłowy”); aby 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.

Możesz tego nie wiedzieć, ale kiedy używasz ogólnego kodu get_sidebar (), będzie on zawierał „sidebar.php”, ponieważ nie dodałeś argumentu $ name. To jest domyślne użycie. Kiedy dodasz „-name” po „sidebar * .php”, możesz wywołać ten dodatek za pomocą argumentu $ name.

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.