Dodaj łatwo niestandardowe opcje motywu w WordPressie

Jak dodać niestandardowe opcje motywu w WordPressie; Utwórz stronę opcji motywu w WordPressie; Samouczek dotyczący niestandardowych opcji motywu w WordPressie; Dodaj opcje do dostosowywacza motywu WordPress; Tworzenie strony opcji motywu w WordPressie; Dostosuj opcje motywu WordPress; API ustawień WordPressa dla opcji motywu; Utwórz panel opcji motywu w WordPressie; Dodaj niestandardowe opcje do motywu WordPress; Strona ustawień niestandardowego motywu WordPress;

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:

  1. 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.
  2. Dodaj kod:
    • Skopiuj podany fragment kodu.
    • Wklej go na końcu pliku functions.php.
    • Kliknij Aktualizuj plik, aby zapisać zmiany.
  3. 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.
  4. 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.