Dodaj łatwo niestandardowe opcje motywu w WordPressie
Objaśnienie
Aby dodać niestandardowe opcje motywu do swojej witryny WordPress, w zasadzie tworzysz nową stronę ustawień w obszarze administracyjnym WordPressa. Oto prosty podział, jak to działa:
- Dodaj stronę menu: Kod wykorzystuje funkcję do dodania nowej strony do menu administracyjnego WordPressa. Strona ta nosi tytuł "Niestandardowe opcje motywu" i może być dostępna dla użytkowników z odpowiednimi uprawnieniami.
- Wyświetl stronę opcji: Funkcja zwrotna jest używana do wyświetlenia zawartości tej nowej strony. Zawiera formularz, w którym użytkownicy mogą wprowadzać swoje ustawienia.
- Zarejestruj ustawienia: Kod rejestruje nową grupę ustawień oraz pole tekstowe. Tutaj będą przechowywane rzeczywiste dane wprowadzone przez użytkowników.
- Sanityzuj dane wejściowe: Przed zapisaniem jakichkolwiek danych, dane wejściowe są sanityzowane, aby zapewnić ich bezpieczeństwo i czystość. Pomaga to zapobiegać zapisaniu niepożądanego kodu.
Po wdrożeniu tego kodu, w obszarze administracyjnym WordPressa pojawi się nowa strona "Opcje motywu". Tutaj możesz dodać więcej pól i sekcji w razie potrzeby, aby dalej dostosować swój motyw. Pamiętaj tylko, aby zawsze sanityzować swoje dane wejściowe dla bezpieczeństwa!
Kod
<?php
// Hook to add a custom theme options page to the WordPress admin menu
add_action('admin_menu', 'wp_dudecom_add_theme_options_page');
function wp_dudecom_add_theme_options_page() {
add_menu_page(
'Custom Theme Options', // Page title
'Theme Options', // Menu title
'manage_options', // Capability
'wp-dudecom-theme-options', // Menu slug
'wp_dudecom_theme_options_page', // Callback function
'dashicons-admin-generic', // Icon
61 // Position
);
}
// Callback function to display the theme options page
function wp_dudecom_theme_options_page() {
?>
<div class="wrap">
<h1>Custom Theme Options</h1>
<form method="post" action="options.php">
<?php
settings_fields('wp_dudecom_theme_options_group');
do_settings_sections('wp-dudecom-theme-options');
submit_button();
?>
</form>
</div>
<?php
}
// Hook to register settings, sections, and fields
add_action('admin_init', 'wp_dudecom_register_theme_options');
function wp_dudecom_register_theme_options() {
register_setting('wp_dudecom_theme_options_group', 'wp_dudecom_theme_options', 'wp_dudecom_sanitize_options');
add_settings_section(
'wp_dudecom_main_section',
'Main Settings',
'wp_dudecom_main_section_callback',
'wp-dudecom-theme-options'
);
add_settings_field(
'wp_dudecom_text_field',
'Custom Text Field',
'wp_dudecom_text_field_callback',
'wp-dudecom-theme-options',
'wp_dudecom_main_section'
);
}
// Callback function for the main section
function wp_dudecom_main_section_callback() {
echo '<p>Main settings for the theme.</p>';
}
// Callback function for the text field
function wp_dudecom_text_field_callback() {
$options = get_option('wp_dudecom_theme_options');
?>
<input type="text" name="wp_dudecom_theme_options[wp_dudecom_text_field]" value="<?php echo isset($options['wp_dudecom_text_field']) ? esc_attr($options['wp_dudecom_text_field']) : ''; ?>" />
<?php
}
// Sanitize options before saving
function wp_dudecom_sanitize_options($input) {
$sanitized_input = array();
if (isset($input['wp_dudecom_text_field'])) {
$sanitized_input['wp_dudecom_text_field'] = sanitize_text_field($input['wp_dudecom_text_field']);
}
return $sanitized_input;
}
?>
Instrukcja
Lokalizacja pliku: Dodaj podany kod do pliku functions.php
swojego motywu lub do pliku niestandardowej wtyczki.
Wymagania wstępne: Upewnij się, że masz dostęp do plików motywu WordPress i możliwość ich edytowania. Nie są wymagane dodatkowe wtyczki.
Kroki wdrożenia:
- Dostęp do plików motywu:
- Zaloguj się do panelu administracyjnego WordPress.
- Przejdź do Wygląd > Edytor motywu.
- W prawym pasku bocznym znajdź i kliknij na
functions.php
.
- Dodaj kod:
- Skopiuj podany fragment kodu.
- Wklej go na końcu pliku
functions.php
. - Kliknij Aktualizuj plik, aby zapisać zmiany.
- Zweryfikuj stronę opcji motywu:
- Wróć do panelu administracyjnego WordPress.
- Poszukaj nowego elementu menu oznaczonego jako Opcje motywu w menu administracyjnym.
- Kliknij na niego, aby uzyskać dostęp do strony opcji niestandardowego motywu.
- Przetestuj funkcjonalność:
- Na stronie Opcje motywu wprowadź jakiś tekst w Polu tekstowym niestandardowym.
- Kliknij Zapisz zmiany, aby zapisać swoje dane.
- Upewnij się, że dane zostały zapisane i wyświetlają się poprawnie.
Jeśli potrzebujesz pomocy przy tym wdrożeniu lub wymagasz bardziej zaawansowanej funkcjonalności, rozważ skontaktowanie się z ekspertami na stronie wp-dude.com w celu uzyskania profesjonalnej pomocy.