Jak utworzyć niestandardowe strony administracyjne w panelu WordPress

Aktualizacja: 30 czerwca 2013 r. / Artykuł: Jerry Low

Kiedy kilka lat temu WordPress zaprezentował swój standardowy motyw, Kubrick, zajął się również nową, ekscytującą funkcją. Tą funkcją był panel administracyjny motywu niestandardowego, włączany przez zdefiniowanie funkcji i preferencji w pliku „functions.php” specyficznym dla motywu. W następnych latach strona opcji motywu była niestety niedostatecznie wykorzystywana przez wielu projektantów motywów, ale w rzeczywistości jest to świetny sposób na zapewnienie użytkownikom kontroli nad wyglądem witryny bez zmuszania ich do instalowania nowego motywu. Rzeczy, takie jak obraz tła motywu, liczba kolumn, a nawet kolory czcionek, można zmienić za pomocą tego niestandardowego panelu administracyjnego.

Sam panel administracyjny jest zmieniany poprzez wypełnienie pliku funkcji motywu serią tablic PHP, które definiują wartości niestandardowe. Wartości te są następnie uwzględniane w szablonie i są definiowane w panelu administracyjnym, który pozwala użytkownikom na wizualne zdefiniowanie preferencji wyglądu. Cały proces jest właściwie stosunkowo prosty, gdy projektant motywów dowie się, jak działa PHP i jak wykorzystać ten fragment kodu, aby umożliwić niestandardową prezentację w plikach szablonów.

Ten wieloetapowy proces rozpoczyna się od ustawienia kilku zmiennych dla całej witryny i określenia, co należy dostosować na tej nowej stronie administracyjnej.

Krok 1: Tworzenie i edycja strony Functions.php dla poszczególnych tematów

Jeśli opracowałeś własny motyw, istnieje niewielkie prawdopodobieństwo, że utworzyłeś plik functions.php, który ma zostać sparowany z istniejącymi plikami szablonów. Jest to stosunkowo zaawansowana opcja, a większość projektantów po prostu ją całkowicie pomija. W takim przypadku konieczne jest otwarcie wybranego klienta FTP i wskazanie go na następujący adres URL serwera, na którym znajdują się pliki motywu:

/ public_html / wp-content / themes / YOUR-THEME-FOLDER /

Gdy już znajdziesz się w tym folderze, upewnij się, że nie ma w nim pliku „functions.php”, a następnie za pomocą programu do edycji tekstu utwórz nowy plik o nazwie „functions.php”. Ten plik można następnie zapisać i przesłać na serwer za pośrednictwem protokołu FTP. Można go edytować bezpośrednio na serwerze, eliminując potrzebę korzystania z programu do edycji tekstu.

Pierwszym krokiem do zdefiniowania prawidłowego panelu opcji motywu w pliku „functions.php” jest zdefiniowanie dwóch zmiennych u góry dokumentu. Te zmienne będą używane do wyświetlania nazwy motywu za pomocą Pulpitu nawigacyjnego, a także do identyfikowania elementów formularza i selekcji na tej stronie administracyjnej. Obserwuj poniższy kod, umieść go na górze dokumentu „functions.php” i dostosuj do potrzeb swojej witryny.

$ longname = „Motyw programistyczny panelu administracyjnego”;
$ shortcode = „apdt”;

Te zmienne służą różnym celom. Zmienna $ longname zostanie użyta do wydrukowania nazwy motywu w aktualnym panelu opcji administracyjnych. Z tego powodu zaleca się, aby programiści przypisywali dokładną nazwę motywu do tej zmiennej, aby wyeliminować zamieszanie wśród użytkowników motywu. Zmienna $ shortcode powinna składać się z małych liter bez interpunkcji, ponieważ będzie używana do identyfikacji elementów formularza w samym kodzie. W przykładzie użyto prostego akronimu opartego na pełnej nazwie motywu; można to dostosować do upodobań użytkownika.

Krok 2: Definiowanie dostosowywalnych preferencji przy użyciu tablic PHP

Po pierwsze, ważne jest, aby powiedzieć motywowi, jaka jest nazwa panelu administracyjnego. Zostanie to wydrukowane przede wszystkim z potencjalnymi ustawieniami i pomoże początkującym użytkownikom w zrozumieniu celu. Odbywa się to poprzez dodanie następującej tablicy do znacznika $ settings w pliku „functions.php”:

$ settings = array (
array („name” => $ longname. ”Ustawienia wyglądu”,
„Type” => „title”),

Następnie musimy wskazać, że tablica pełna opcji jest „otwarta” lub może być modyfikowana przez użytkownika. Odbywa się to za pomocą innej prostej tablicy, która pojawia się tuż pod definicją tytułu strony. To wygląda tak:

tablica („type” => „open”),

Teraz możemy zacząć definiować opcje wyglądu motywu, a każda z nich jest tworzona jako nowa tablica. W tym przykładzie zdefiniujemy tekst, który zostanie umieszczony w stopce motywu. Domyślnie motyw przykładowy zawiera łącze do witryny internetowej twórcy kompozycji, a także informacje o wersji oprogramowania. Nie jest to jednak pożądane dla dużej liczby użytkowników WordPress, którzy woleliby umieścić własne informacje w stopce, więc włączenie tej niestandardowej kontrolki oszczędza im ręcznej edycji pliku „footer.php”. Oto jak to się robi.

tablica (
„Name” => „Tekst stopki motywu niestandardowego”,
„Desc” => „To jest tekst wyświetlany na samym końcu każdej strony zawartej w tym motywie.”,
„Id” => $ shortcode. ”_ Custom_footer”,
„Type” => „tekst”,
„Std” => „Motyw eksperymentalny v1.0. Opracowany przez Johna Doe. Więcej tematów tutaj. ”),

Powyższa tablica pozwala użytkownikowi określić standardowy tekst stopki kompozycji, ale tagi tablic należy wyjaśnić, aby lepiej opisać, jak ten proces działa i co definiuje każda część tablicy.

Imię i nazwisko: Odnosi się to do nazwy samego pola tekstowego i nie jest prezentowane użytkownikom po wejściu na stronę opcji administracyjnych dla tematu.

asc: Jest to krótki opis, który towarzyszy ustawieniu niestandardowemu i jest wyświetlany użytkownikom.

ID: To wykorzystuje krótki kod wraz z niestandardową identyfikacją nazwy formularza, aby zarówno przedstawić, jak i zaprojektować pole tekstowe.

Rodzaj: Określa, czy elementem formularza jest linia tekstu, pole tekstowe, rozwijane menu, przycisk opcji lub pole wyboru.

STD: Określa wartość domyślną wybranego elementu. W przypadku pola tekstowego określa on domyślny tekst wprowadzony do niego. W przypadku pól wyboru, przycisków opcji i rozwijanych ramek określa to, która opcja jest domyślnie wybrana.

Krok 3: Mówienie WordPress, aby umożliwić dostęp do nowej strony opcji

Mimo że strona opcji została wykorzystana w celu wykorzystania pliku „functions.php” w folderze domowym motywu, nie została jeszcze rozpoznana przez WordPress ani uwzględniona wśród wielu innych stron ustawień na pulpicie nawigacyjnym WordPress. Dzieje się tak, ponieważ strona opcji kompozycji musi być zidentyfikowana na stronie funkcji i wskazana, dokąd się udać (jako niezależny element paska bocznego lub w ramach grupy „Ustawienia”). Odbywa się to za pomocą stosunkowo prostej funkcji, która jest dodawana do pliku „functions.php” poniżej tablic potencjalnych dostosowań:

function experimental_theme_save_values ​​() {
global $ longname, $ shortcode, $ settings;
if ($ _GET ['page'] == basename (__ FILE__)) {
if ('save' == $ _REQUEST ['action']) {
foreach (ustawienia $ jako wartość $) {
update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); }
foreach (ustawienia $ jako wartość $) {
if (isset ($ _REQUEST [$ value ['id']])) {update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); } else {delete_option ($ value ['id']); }}
nagłówek („Lokalizacja: themes.php? page = functions.php & save = true”);
die;
} else if ('reset' == $ _REQUEST ['action']) {
foreach (ustawienia $ jako wartość $) {
delete_option ($ value ['id']); }
nagłówek („Lokalizacja: themes.php? page = functions.php & reset = true”);
die;
}
}
add_menu_page ($ longname. ”Appearance Settings”, „”. $ longname. ”Appearance Settings”, 'edit_themes', basename (__ FILE__), 'experimental_theme_save_values');

Ten fragment kodu robi dwie rzeczy. Po pierwsze, pozwala na zapisanie ustawień motywu za pośrednictwem panelu opcji administracyjnych. Po drugie, umieszcza niezależny przycisk na pasku bocznym pulpitu nawigacyjnego WordPress, który pozwala użytkownikowi kliknąć go i przejść bezpośrednio do panelu opcji motywu. Jest oznaczony jako „Ustawienia wyglądu”, tak jak sama strona. Spójność jest kluczem do wyeliminowania nieporozumień i kierowania użytkowników na stronę bez konieczności informowania ich, aby udali się do panelu opcji w celu dostosowania wyglądu motywu.

Krok 4: Dodawanie komunikatów o błędach i zamykanie pliku PHP

Ostatnim krokiem do wypełnienia wszystkich elementów panelu opcji kompozycji jest zdefiniowanie komunikatów o błędach, które może napotkać użytkownik, a następnie upewnienie się, że elementy formularza mogą być prezentowane w domyślnym stylu WordPress na stronie opcji. Dodawanie komunikatów o błędach odbywa się poprzez wklejenie tego kodu do pliku funkcji PHP:

function experimental_theme_save_values ​​() {
global $ longname, $ shortcode, $ settings;
if ($ _REQUEST ['zapisane']) echo '
„. $ imnazwa”. dostosowania wyglądu zostały pomyślnie zapisane.
";
if ($ _REQUEST ['reset']) echo '
„. $ imnazwa”. dostosowania wyglądu zostały pomyślnie zresetowane.
";

Pod tymi dwoma wierszami kodu, sekcję PHP pliku functions.php można zamknąć za pomocą znacznika końcowego?>. Poniżej zostanie umieszczony kod XHTML, aby nadać styl elementom przy użyciu standardowego arkusza stylów Panelu WordPress.

Krok 5: Podawanie strony opcji w pewnym stylu

Obecnie użytkownicy pulpitu WordPress Dashboard mogą zobaczyć nową stronę błędu, ale nie mogą wiele z tym zrobić. Jest tak, ponieważ elementy formularza i arkusz stylów nie zostały jeszcze umieszczone w pliku functions.php do użytku w interfejsie administracyjnym. To się wkrótce zmieni, ponieważ dołączamy arkusz stylów i domyślne elementy formularza do użytku w nowym panelu:

<div class = ”wrap”>
<h2> <? php echo $ longname; ? > Ustawienia </ h2>

<form method = ”post” action = ”options.php”>

<? php przerwa; case 'text':? >

<tr>
<td width = ”20%” rowspan = ”2 ″ valign =” middle ”> <strong> <? php echo $ value ['name']; ? > </ strong> </ td>
<td width = ”80%”> <input style = ”width: 100%;” name = ”<? php echo $ value ['id']; ? > ”Id =” <? Php echo $ value ['id']; ? > ”Type =” <? Php echo $ value ['type']; ? > ”Wartość =” <? Php if (get_settings ($ value ['id'])! = „”) {Echo get_settings ($ value ['id']); } else {echo $ wartość ['std']; }? > ”/> </ Td>
</ tr>

<tr>
<td> <small> <? php echo $ value ['desc']; ? > </ small> </ td>
</ tr> <tr> <td colspan = ”2 ″> </ td>
</ tr>

<? php przerwa;}? >

<input type = ”submit” value = ”<? php _e ('Zapisz ustawienia motywu')? > ”/>

Ten kod jest wklejany poniżej zamykającego znacznika pliku funkcji PHP i można go dostosować do każdego typu formularza, który może zawierać panel opcji motywu. Zmienną „wielkość liter” można zmienić z „tekstu” na takie elementy, jak pole tekstowe, pole wyboru, zaznaczenie i tytuł. Te formularze muszą być zawarte, zdefiniowane i stylizowane tylko wtedy, gdy są używane przez motyw. W przeciwnym razie ich włączenie nie jest konieczne, a pozostawienie ich poza plikiem funkcji motywu będzie promować wydajność i czysty kod.

Krok 9: Włączenie opcji niestandardowej do rzeczywistego motywu

Aby upewnić się, że wszelkie zmiany można zobaczyć w szablonach publicznych kompozycji, należy wykonać dwa kroki. Pierwszym jest umieszczenie zmiennej w stopce motywu, która wyświetli zdefiniowany przez użytkownika tekst o prawach autorskich i wersjach, który udostępniliśmy we wcześniejszych krokach tego samouczka. Dokonuje się tego poprzez umieszczenie następującego kodu w obszarze praw autorskich stopki:

<? php echo $ apdt_custom_footer; ? >

Ten tekst wywołuje niestandardową tablicę dla tekstu stopki, która została wcześniej zdefiniowana i, zgodnie z instrukcją „Echo”, drukuje ten tekst w stopce. Ten tag może być zawarty w dowolnych tagach XHTML, które użytkownik uzna za stosowne, ale nie pojawi się bez fragmentu kodu dodanego do nagłówka witryny.

W nagłówku motyw musi być poinstruowany, aby szukał opcji zdefiniowanych przez użytkownika, które są ustawione na pulpicie nawigacyjnym WordPress, i musi znać zmienne zdefiniowane w niestandardowym pliku „functions.php”, aby mógł wydrukować ich zawartość na stronie internetowej. Odbywa się to poprzez umieszczenie następującej zmiennej PHP w nagłówku witryny (zwykle w pliku „header.php”):

<? php globalne ustawienia $;
foreach (ustawienia $ jako wartość $) {
if (get_settings ($ value ['id']) === FALSE) {$$ value ['id'] = $ value ['std']; } else {$$ value ['id'] = get_settings ($ value ['id']); }
}
? >

To wszystko. Teraz każda opcja zdefiniowana w pliku niestandardowych funkcji. Php może zostać odzwierciedlona w wyglądzie strony po prostu poprzez włączenie niestandardowej zmiennej PHP, w której mają obowiązywać określone dostosowania i treść.

Krok 10: przetestuj nowe ustawienia i stronę opcji

Żaden projekt WordPressa nie jest w pełni zakończony, dopóki nie zostanie dokładnie przetestowany pod kątem błędów, błędów i przypadkowych błędów w kodzie PHP umieszczonym w pliku „functions.php”. To powiedziawszy, czas na testy! Zaloguj się do pulpitu nawigacyjnego WordPress i, jeśli motyw, nad którym pracujesz, nie jest aktualnie wybrany, przejdź do kategorii „Wygląd” na pasku bocznym i aktywuj odpowiedni motyw.

Stamtąd sprawdź kilka rzeczy:

  1. Upewnij się, że link ustawień motywu pojawia się jako osobna jednostka na pasku bocznym pod nagłówkiem kategorii paska bocznego „Ustawienia”.
  2. Upewnij się, że dostęp do określonej opcji dostosowywania tekstu stopki można uzyskać w panelu sterowania opcjami niestandardowymi; zmodyfikuj domyślną zawartość stopki i zapisz preferencję. Upewnij się, że zapisuje się bez błędu.
  3. Odwiedź swoją rzeczywistą, publiczną witrynę internetową i upewnij się, że wyświetlane są zmiany wprowadzone w panelu informacyjnym dotyczące zawartości stopki.
  4. Jeśli wszystko działa poprawnie, odetchnij z ulgą i skorzystaj z pierwszej strony panelu sterowania opcji motywu WordPress.

O Jerry Low

Założyciel WebHostingSecretRevealed.net (WHSR) - przegląd hostingu zaufany i używany przez użytkowników 100,000. Więcej niż doświadczenie 15 w hostingu, marketingu afiliacyjnym i SEO. Współpracuje z ProBlogger.net, Business.com, SocialMediaToday.com i innymi.