Snippet

Zintegruj Google Fonts z WordPress w prosty sposób

Jak dodać czcionki Google do WordPressaIntegracja czcionek Google w WordPressieUżyj wtyczki czcionek Google w WordPressieDodaj czcionki Google do motywu WordPressRęczne dodawanie czcionek Google do WordPressaNajlepsza wtyczka do czcionek Google w WordPressieCzcionki niestandardowe WordPress GoogleTutorial czcionek Google WordPressOsadź czcionki Google w WordPressieCzcionki 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

1<?php 2// Function to enqueue Google Fonts in WordPress 3function wp_dudecom_enqueue_google_fonts() { 4 // Check if not in admin area 5 if ( ! is_admin() ) { 6 // Enqueue Google Fonts 7 wp_enqueue_style( 'wp-dudecom-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null ); 8 } 9} 10add_action( 'wp_enqueue_scripts', 'wp_dudecom_enqueue_google_fonts' ); 11 12// Function to add Google Fonts to the editor 13function wp_dudecom_add_editor_styles() { 14 add_editor_style( 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap' ); 15} 16add_action( 'admin_init', 'wp_dudecom_add_editor_styles' ); 17?>

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.