Jak utworzyć niestandardowe strony administracyjne w panelu WordPress

Artykuł napisany przez:
  • Polecane artykuły
  • Zaktualizowano: Jun 30, 2013

Kiedy WordPress zaprezentował to, co kiedyś było jego standardowym motywem, Kubrick, kilka lat temu, wykorzystał także nową ekscytującą funkcję. Ta funkcja była niestandardowym panelem administracyjnym motywu, włączonym przez zdefiniowanie funkcji i preferencji w pliku „functions.php” dla danego motywu. W następnych latach wielu projektantów motywów niestety nie wykorzystało strony opcji motywu, ale w rzeczywistości jest to świetny sposób, aby dać użytkownikom kontrolę 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 znajdziesz się w tym folderze, sprawdź dwukrotnie, aby upewnić się, że nie ma pliku „functions.php”, a następnie użyj programu do edycji tekstu, aby utworzyć nowy plik o nazwie „functions.php”. Plik ten można następnie zapisać i przesłać na serwer za pośrednictwem FTP. Można go edytować bezpośrednio na serwerze, eliminując potrzebę 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. Zmienne te zostaną wykorzystane do wyświetlenia nazwy motywu za pomocą pulpitu nawigacyjnego, a także do identyfikacji elementów formularza i wyboru na tej stronie administracyjnej. Obserwuj poniższy kod, umieść go w górnej części dokumentu „functions.php” i dostosuj do potrzeb witryny.

$ longname = "Temat rozwoju 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ć tematowi, jak nazywa się panel administracyjny. Zostanie to wydrukowane ponad wszystkimi potencjalnymi ustawieniami i pomoże zwiększyć jasność celu początkującym użytkownikom. 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żna ją zmodyfikować na podstawie danych wprowadzonych 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:

array ("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 link do strony internetowej twórcy motywu, a także informacje o wersji wersji. Nie jest to pożądane przez dużą liczbę użytkowników WordPress, którzy woleliby umieszczać własne informacje w stopce, więc włączenie tej niestandardowej kontroli oszczędza im ręcznej edycji pliku „footer.php”. Oto jak to się robi.

tablica (
"Name" => "Tekst stopki niestandardowego motywu",
"Desc" => "To jest tekst wyświetlany na samym końcu każdej strony zawartej w tym motywie.",
"Id" => $ shortcode. "_ Custom_footer",
"Type" => "text",
"Std" => "Temat 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.

nazwa: 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 ma cel przy użyciu pliku „functions.php” w folderze domowym motywu, nie została jeszcze rozpoznana przez WordPress lub uwzględniona na wielu innych stronach ustawień w Panelu WordPress. Wynika to z faktu, że strona opcji motywu musi zostać zidentyfikowana na stronie funkcji i poinformowana, gdzie ma iść (jako niezależny element paska bocznego lub w grupie „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 i zapisany = prawda”);
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. ”Ustawienia wyglądu”, „”. $ longname. ”Ustawienia wyglądu”, „edit_themes”, basename (__ FILE__), „experimental_theme_save_values”);

Ten fragment kodu robi dwie rzeczy. Po pierwsze, pozwala zapisać ustawienia motywu za pomocą panelu opcji administracyjnych. Po drugie, umieszcza niezależny przycisk na pasku bocznym pulpitu WordPress, który pozwala użytkownikowi kliknąć go i przejść bezpośrednio do panelu opcji motywu. Jest oznaczony „Ustawienia wyglądu”, podobnie jak sama strona. Spójność jest kluczem do wyeliminowania nieporozumień i przekierowania użytkowników na stronę bez wyraźnego nakazania im przejścia 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 ['save']) echo '
„. $ themename.” dostosowania wyglądu zostały pomyślnie zapisane.
';
if ($ _REQUEST ['reset']) echo '
„. $ themename.” dostosowania wyglądu zostały pomyślnie zresetowane.
';

Pod tymi dwoma liniami kodu sekcja PHP pliku functions.php może zostać zamknięta za pomocą znacznika końcowego. Poniżej znajduje się kod XHTML, aby stylizować elementy za pomocą standardowego arkusza stylów pulpitu nawigacyjnego 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 break; przypadek „tekst”:? >

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

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

<? php break;}? >

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

Ten kod jest wklejany poniżej znacznika zamykającego 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 rzeczy jak pole tekstowe, pole wyboru, wybór i tytuł. Formularze te muszą być dołączone, zdefiniowane i stylizowane, jeśli są używane przez motyw. W przeciwnym razie ich włączenie nie jest konieczne, a pozostawienie pliku funkcji motywu nie będzie poprawiać wydajności i czyszczenia kodu.

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 tablicę niestandardową dla wcześniej zdefiniowanego tekstu stopki 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 należy poinstruować motyw, aby szukał opcji zdefiniowanych przez użytkownika w panelu kontrolnym WordPress i musi znać zmienne zdefiniowane w niestandardowym pliku "functions.php", aby można było wydrukować ich zawartość na stronie internetowej. Odbywa się to poprzez umieszczenie następującej zmiennej PHP w nagłówku strony (zazwyczaj plik "header.php"):

Ustawienia <? php global $;
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

Żadne prace programistyczne WordPress nie są w pełni ukończone, dopóki nie zostaną dokładnie przetestowane 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 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.