Zintegruj Google Fonts z WordPress w prosty sposób

Jak dodać czcionki Google do WordPressa; Integracja czcionek Google w WordPressie; Użyj wtyczki czcionek Google w WordPressie; Dodaj czcionki Google do motywu WordPress; Ręczne dodawanie czcionek Google do WordPressa; Najlepsza wtyczka do czcionek Google w WordPressie; Czcionki niestandardowe WordPress Google; Tutorial czcionek Google WordPress; Osadź czcionki Google w WordPressie; Czcionki Google WordPress krok po kroku;

Objaśnienie

Aby dodać czcionki Google do swojej strony WordPress, możesz użyć prostego fragmentu kodu. Ten kod zapewni, że czcionki będą dostępne zarówno na Twojej stronie, jak i w edytorze WordPress.

Oto, co robi ten kod:

  • Sprawdza, czy nie znajdujesz się w obszarze administracyjnym (zapleczu swojej strony) przed dodaniem czcionek. Dzięki temu czcionki są ładowane tylko na froncie, gdzie będą je widzieć Twoi odwiedzający.
  • Używa funkcji do załadowania arkusza stylów czcionek Google. W tym przykładzie używana jest czcionka "Roboto" w wagach 400 i 700. Możesz zmienić czcionkę i wagi, modyfikując adres URL.
  • Inna funkcja jest używana do dodania tych samych czcionek Google do edytora WordPress. Oznacza to, że podczas pisania lub edytowania postów zobaczysz czcionki tak, jak pojawiają się na Twojej stronie.

Dodając ten kod do pliku functions swojego motywu, możesz łatwo zintegrować czcionki Google z swoją stroną WordPress bez potrzeby używania wtyczki. Pamiętaj tylko, aby zastąpić adres URL czcionki, jeśli chcesz użyć innej czcionki z Google Fonts.

Kod

<?php
// Function to enqueue Google Fonts in WordPress
function wp_dudecom_enqueue_google_fonts() {
    // Check if not in admin area
    if ( ! is_admin() ) {
        // Enqueue Google Fonts
        wp_enqueue_style( 'wp-dudecom-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_dudecom_enqueue_google_fonts' );

// Function to add Google Fonts to the editor
function wp_dudecom_add_editor_styles() {
    add_editor_style( 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap' );
}
add_action( 'admin_init', 'wp_dudecom_add_editor_styles' );
?>

Instrukcja

Lokalizacja pliku: functions.php

Wymagania wstępne: Brak

Kroki wdrożenia:

  1. Dostęp do panelu WordPress: Zaloguj się do swojego panelu administracyjnego WordPress.
  2. Przejdź do Edytora motywów: Przejdź do Wygląd > Edytor motywów.
  3. Otwórz functions.php: W prawym pasku bocznym znajdź i kliknij na Funkcje motywu (functions.php).
  4. Wstaw kod: Przewiń na dół pliku i wklej podany fragment kodu.
  5. Zapisz zmiany: Kliknij przycisk Aktualizuj plik, aby zapisać zmiany.
  6. Zweryfikuj integrację: Odwiedź swoją stronę, aby upewnić się, że czcionki Google są zastosowane. Powinieneś zobaczyć czcionkę "Roboto" w użyciu.
  7. Sprawdź edytor: Otwórz wpis lub stronę w edytorze WordPress, aby potwierdzić, że czcionka jest również tam zastosowana.

Jeśli potrzebujesz dalszej pomocy przy tym wdrożeniu lub wymagasz bardziej zaawansowanej funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.