WordPress

Jak samodzielnie hostować czcionki i wyświetlać je we wszystkich opcjach typografii pełnego edytora bloków witryny, w tym stylów globalnych

  • 31 stycznia, 2023
  • 3 min read
Jak samodzielnie hostować czcionki i wyświetlać je we wszystkich opcjach typografii pełnego edytora bloków witryny, w tym stylów globalnych


jestem projektantem. Nie umiem kodować, ale potrafię postępować zgodnie ze wskazówkami i wprowadzać drobne modyfikacje kodu napisanego przez innych.

Walczyłem o to, jak dodać samodzielnie hostowane czcionki do mojej witryny i wyświetlać je w opcjach typografii edytora bloków, aby móc ich używać w moim projekcie. Przeprowadziłem wiele dni badań i eksperymentów, a większość tego, co znalazłem, korzysta z narzędzia Customizer, którego nie potrzebuję. Wiem wystarczająco dużo o kodowaniu, aby wiedzieć, że jeśli nie jest dokładnie w porządku, to jest źle i nie zadziała. Nie udało mi się znaleźć czegoś wystarczająco jasnego, abym wiedział, co robię źle.

Użyłem wtyczki, aby stworzyć motyw potomny dwudziestu dwudziestu trzech lat. Oto utworzony przez nią plik function.php.

<?php /*

  This file is part of a child theme called 2023 Child.
  Functions in this file will be loaded before the parent theme's functions.
  For more information, please read
  

*/

// this code loads the parent's stylesheet (leave it in place unless you know what you're doing)

function your_theme_enqueue_styles() {

    $parent_style="parent-style";

    wp_enqueue_style( $parent_style, 
      get_template_directory_uri() . '/style.css'); 

    wp_enqueue_style( 'child-style', 
      get_stylesheet_directory_uri() . '/style.css', 
      array($parent_style), 
      wp_get_theme()->get('Version') 
    );
}

add_action('wp_enqueue_scripts', 'your_theme_enqueue_styles');

/*  Add your own functions below this line.
    ======================================== */ 

Oto plik style.css, który również został utworzony w tym samym czasie.

/* 
 Theme Name:   2023 Child
 Theme URI:    
 Description:  
 Author:       Verity
 Author URI:   
 Template:     twentytwentythree
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  

 /* == Add your own styles below this line ==
--------------------------------------------*/

Ktoś napisał dla mnie kod, abym mógł podłączyć własne informacje o czcionce, co zrobiłem. Zasugerowali również, abym utworzył dedykowany plik add_fonts.css, który pomieści je wszystkie. Brzmiało to dla mnie bardzo rozsądnie, więc zrobiłem całkowicie pusty i umieściłem to w nim.

@font-face {
    font-family: "Petrona";
    src: url("fonts/petrona/petrona-v28-latin-regular.woff2") format("woff2"),
         url("fonts/petrona/petrona-v28-latin-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

Powiedzieli mi również, że muszę umieścić plik w kolejce i tam utknąłem. Próbowałem wykonać kilka wskazówek, które znalazłem tutaj i nie zadziałało. A raczej czcionka nie pojawiła się w rodzinie czcionek typograficznych.

Warto przeczytać!  Recenzja bezpiecznego logowania CM: wtyczka do uwierzytelniania dwuskładnikowego

Kiedy przeprowadziłem dalsze badania, znalazłem tak wiele różnych rodzajów kodu, że po prostu się zgubiłem i nie mam pojęcia, co jest dobre, a co złe, ponieważ nie koduję.

Czy mój plik function.php jest poprawny?

Myślę, że wygląda na to, że plik style.css dziecka jest umieszczany w kolejce w wygenerowanym kodzie. Czy to też wymaga kolejkowania? (kod czcionki nie działał również po wklejeniu bezpośrednio do style.css)

Czy plik .css wymaga jakiegoś nagłówka, czy też to, co jest w wygenerowanym, to tylko notatki?

Czy kod do wstawienia czcionki jest poprawny?

I jak prawidłowo umieścić go w kolejce w pliku function.php?

A może to wszystko jest złe i muszę zrobić coś innego dla mojego prawdziwego celu: wyświetlanie niestandardowych czcionek hostowanych przez siebie w selektorze rodziny czcionek typograficznych edytorów bloków?

Dzięki! Prawda


Źródło