Jak zastosować CSS na określonej stronie/poście?

Czy wiesz, że możesz zastosować CSS na określonej stronie lub poście w WordPressie ? Tak, jest to możliwe ze względu na przyjazną dla CSS naturę WordPressa. W tym przewodniku pokażemy Ci różne sposoby dodawania CSS do określonej strony lub posta.

Wszystkie motywy WordPress zwykle stosują różne style do każdego rodzaju treści. Posty, strony, taksonomie, profile i wszelkie inne elementy treści mają w każdym z nich inny arkusz stylów. To samo dotyczy wtyczek i wszystkich innych aspektów WordPressa.

Jednak ze względu na elastyczność WordPressa możesz również używać różnych arkuszy stylów dla określonej strony i typów postów. Ale spójrzmy, dlaczego może być konieczne dodanie do nich CSS, zanim przejdziemy przez ten proces.

Po co stosować CSS do określonej strony lub postu?

Dodanie CSS do określonych stron i postów jest bardzo przydatne, jeśli budujesz witrynę lub projektujesz witrynę internetową . CSS jest zwykle używany do dostosowywania wyglądu strony internetowej. Tak więc korzystanie z CSS w całej witrynie może być bardzo pomocne w prezentowaniu stron internetowych dokładnie tak, jak chcesz dla odwiedzających witrynę.

Może istnieć konkretna strona lub typ posta, który wymaga unikalnego projektu w porównaniu z innymi stronami lub postami w Twojej witrynie. W takim przypadku jedną z najlepszych opcji jest zastosowanie CSS na określonej stronie lub w poście. Te strony lub posty są zwykle dodawane do menu Twojej witryny. Ale mogą również zawierać inne unikalne strony i posty, takie jak strona sklepu, strona produktu, a nawet strona główna.

Na przykład nawet my w QuadLayers używamy CSS na określonych stronach, takich jak Portfolio i Informacje, aby odróżnić je od innych stron lub typów postów. Teraz bez zbędnych ceregieli przejdźmy do procesu.

Jak zastosować CSS na określonej stronie lub poście

Istnieje wiele sposobów na dodanie CSS do określonej strony lub postu. Ale oto 3 najczęstsze z nich :

1. Korzystanie z identyfikatora HTML lub klasy
2. Dodawanie funkcji PHP
3. Dołączanie pliku CSS na określonej stronie lub poście

Wszystkie te podejścia można wykorzystać do zastosowania CSS do wielu celów. W tym artykule omówimy wszystkie te podejścia z odpowiednim samouczkiem krok po kroku.

1. Korzystanie z identyfikatora HTML lub klasy

Jest to jedno z najczęstszych i powszechnie akceptowanych podejść, jeśli chcesz zastosować CSS na określonej stronie lub poście. Wszystko, co musimy zrobić, to pobrać unikalny identyfikator , który będzie miała strona lub post. Następnie ta klasa lub identyfikator HTML pozwala nam kierować wszystkie nasze skrypty CSS na żądaną stronę lub post.

1.1. Znajdź klasę HTML lub identyfikator strony

Najpierw musisz znaleźć identyfikator lub klasę, która ma być użyta w skrypcie CSS. Można to łatwo znaleźć za pomocą narzędzia inspekcji przeglądarki.

Po prostu otwórz stronę, na której chcesz zastosować CSS i kliknij prawym przyciskiem myszy element, który chcesz edytować. Następnie kliknij Sprawdź .

Tutaj sprawdź tag HTML body. Będzie się to różnić w zależności od używanego motywu.

We wszystkich poniższych przykładach użyliśmy motywu Twenty Twenty. Oto, co zobaczysz, gdy sprawdzisz stronę główną witryny internetowej za pomocą motywu Twenty Twenty:

Z powyższego zrzutu ekranu unikalny identyfikator strony głównej to klasa „ home ”. Dlatego jeśli chcesz zastosować niektóre reguły CSS tylko do strony głównej, musisz użyć tej klasy w swoich selektorach.

Załóżmy na przykład, że chcemy nadać styl tylko logo na stronie głównej . Wtedy oprócz klasy domowej potrzebujemy również selektora obrazu logo. Ponownie można to uzyskać z narzędzia inspekcji przeglądarki.

W tym przypadku użyjemy klasy „niestandardowe logo”, aby zastosować nasz styl do logo. Teraz połączmy je razem z klasą z poprzedniego kroku. Na koniec możemy zastosować nasz skrypt tylko na stronie głównej za pomocą następującego selektora CSS:

 .home .custom-logo{ /*your CSS here */}

Uwaga: nie musisz przestrzegać wszystkich tagów HTML pośrednich i uwzględniać ich w selektorze. Możesz je wszystkie pominąć, nawet jeśli element, który chcesz stylizować, jest daleko od unikalnego selektora stron.

Oczywiście, jeśli potrzebujesz bardziej szczegółowego selektora, możesz użyć selektora pełnej ścieżki CSS. Ale jest to dość przytłaczające i w większości przypadków nie będzie konieczne.

Na przykład jest to bardzo specyficzny selektor do stylizacji tego samego elementu logo, który widzieliśmy wcześniej:

 html body.home div#page.site header#masthead div.site-branding div.site-logo span.custom-logo-link img.custom-logo{ /*your CSS here */}

1.2. Znajdź klasę HTML lub identyfikator posta

Podobnie jak na stronach, każdy post powinien mieć unikalną klasę HTML. Ponownie, po prostu sprawdź element w poście, który chcesz zastosować CSS za pomocą narzędzia programisty przeglądarki. Wtedy będziesz mógł zobaczyć unikalny identyfikator, tak jak w atrybucie postid .

W przypadku następującego posta z motywem Twenty Twenty klasa identyfikująca ten post ma identyfikator -557 .

Podobnie możesz zrobić to samo z dowolną inną stroną witryny. Korzystanie z unikalnej klasy, która identyfikuje stronę. Jeśli spojrzysz na poniższy zrzut ekranu, zobaczysz, że klasa identyfikująca stronę to page-id-357 .

Na koniec stwórz własny selektor CSS, który odpowiada potrzebom Twojej witryny, podobnie jak przykład niestandardowego logo. Następnie możesz zastosować kod CSS na określonej stronie lub w poście, dodając go w opcji Wygląd > Dostosuj > Dodatkowy kod CSS . Jeśli potrzebujesz dodatkowej pomocy, możesz zajrzeć do naszego przewodnika, jak zastosować CSS do WordPressa lub zastosować CSS za pomocą narzędzia programisty przeglądarki.

2. Dodawanie funkcji PHP

Poprzednia metoda jest odpowiednia do zastosowania naszego niestandardowego CSS do określonych postów lub stron. To wystarczy do większości dostosowań, których możesz potrzebować. Ale w niektórych przypadkach mogą istnieć ograniczenia:

• Twój motyw nie ma żadnej unikalnej klasy HTML ani identyfikatora dla treści, którą chcesz ostylować.
• Masz dużą listę reguł CSS i musisz je zapisać w osobnych plikach.
• Chcesz zastosować inny warunek poza bieżącą stroną.

Jeśli masz podobne problemy, gdy chcesz zastosować CSS do określonej strony lub postu, lepsze byłoby użycie funkcji PHP .

Ale zanim zaczniemy, upewnij się, że wykonałeś kopię zapasową swojej witryny WordPress lub utworzyłeś motyw potomny dla tego podejścia. Będziemy edytować kilka delikatnych plików w Twojej witrynie. Tak więc wszelkie niepotrzebne zmiany mogą prowadzić do dalszych problemów z Twoją witryną.

Jeśli potrzebujesz pomocy, możesz nawet użyć jednej z najlepszych wtyczek motywów potomnych do WordPress, aby utworzyć motyw potomny.

2.1. Znajdź identyfikator strony/postu

Pierwszym krokiem jest sprawdzenie id strony lub postu, w którym chcemy zastosować nasze style. Możesz zauważyć, że wartości identyfikatora są takie same jak w poprzednim kroku. Jednak nie jest to ten sam identyfikator HTML, którego używaliśmy wcześniej.

Identyfikator, do którego teraz się odnosimy, to zmienna PHP, która identyfikuje posty i strony. Natomiast id w poprzednim podejściu identyfikuje klasę HTML.

Na szczęście znalezienie strony i umieszczenie jej identyfikatora w witrynie jest bardzo łatwe. Po otwarciu edytora możesz zobaczyć identyfikatory stron i postów w panelu administracyjnym zaplecza. Identyfikator postu lub strony jest wymieniony w adresie URL przeglądarki.

Innym sposobem na uzyskanie identyfikatora strony lub posta jest użycie następującego skryptu w pliku functions.php motywu potomnego. Po prostu przejdź do Wygląd > Edytor motywów i otwórz plik functions.php .

Następnie wklej następujący fragment kodu w edytorze i zaktualizuj plik. Wydrukuje identyfikator strony z przodu.

 add_action('wp_head',function(){
    $page_id = get_queried_object_id();
    echo $identyfikator strony;
});

Gdy znasz identyfikator PHP dla posta lub strony, do której chcesz zastosować CSS, możesz po prostu wydrukować CSS na nagłówku. Możesz użyć tego samego haka, którego używaliśmy wcześniej, tj. wp_head() .

Wystarczy ponownie wkleić następujący fragment do pliku functions.php .

 add_action('wp_head','my_head_css');
funkcja my_head_css(){
    $page_id = get_queried_object_id();
    if($page_id==97){
        echo "<style> /* Twój CSS tutaj */ </style>";
    }
}

Upewnij się, że dodałeś swój kod CSS w sekcji „Twój CSS tutaj” i zaktualizuj plik.

3. Dołączanie pliku CSS na określonej stronie lub poście

Poprzednie metody są dobre do dodawania małych fragmentów CSS w celu podstawowego dostosowania, którego wymaga określony post lub strona. Ale w przypadku większych skryptów CSS musisz postępować zgodnie z dobrymi praktykami i przesłać oddzielny plik CSS. gdzie powinny być zebrane wszystkie Twoje niestandardowe CSS.

3.1. Utwórz plik CSS za pomocą edytora kodu

Najpierw musisz utworzyć oddzielny plik CSS ze wszystkimi niezbędnymi skryptami CSS za pomocą edytora kodu. Można używać edytorów, takich jak Visual Studio Code, Sublime text lub innych obsługujących pliki CSS.

Następnie utwórz nowy plik z rozszerzeniem CSS i wklej tutaj swój kod. Na potrzeby tego samouczka nazwaliśmy plik my-style.css .

3.2. Prześlij plik CSS do folderu motywu podrzędnego

Teraz utworzony plik CSS należy przesłać do katalogu motywów podrzędnych. W tym celu możesz użyć klienta FTP, takiego jak FileZilla, aby przesłać plik. Możesz nawet przesłać go do głównego katalogu motywów potomnych .

3.2. Umieść w kolejce swój niestandardowy plik CSS

Teraz możesz umieścić swój niestandardowy plik CSS w kolejce w witrynie WordPress, dodając fragment kodu do pliku functions.php .

W poniższym skrypcie będziemy używać haka wp_enqueue_script() , który jest poprawnym sposobem zastosowania plików CSS do witryny WP. Wewnątrz funkcji rejestrujemy i umieszczamy w kolejce nasz plik CSS ( my-styles.css ) tylko wtedy, gdy warunek jest spełniony. To jest to samo zastosowanie, co w poprzednim przykładzie.

Następnie funkcja get_queried_object_id() pobierze identyfikator bieżącej strony lub posta. Wystarczy jeszcze raz dodać poniższy skrypt do pliku functions.php i zaktualizować go.

 add_action( 'wp_enqueue_scripts', 'moje_style_motywu' );

function my_theme_styles() {
    if(get_queried_object_id()==97){
        wp_register_style( 'moje-style', get_stylesheet_directory_uri() . '/moje-style.css');
        wp_enqueue_style( 'moje-style', get_stylesheet_directory_uri() . '/moje-style.css');
    }
}

Uwaga: w powyższym przykładowym skrypcie odwołujemy się do tego samego odwołania do identyfikatora, którego użyliśmy w poprzednich przykładach, czyli 97.

Jeśli chcesz uzyskać więcej informacji na temat dodawania pliku CSS, zapoznaj się z naszym szczegółowym przewodnikiem dotyczącym stosowania CSS w WordPress.

Wniosek

Oto różne metody, dzięki którym możesz zastosować CSS do określonej strony lub postu. Może ci bardzo pomóc w tworzeniu unikalnych projektów dla określonych stron i postów w Twojej witrynie. Podsumowując, istnieją 3 najczęstsze sposoby dodawania CSS do określonych stron i postów:

• Korzystanie z identyfikatora HTML lub klasy
• Dodawanie funkcji PHP
• Dołączanie pliku CSS do określonej strony lub postu

Najprostszym podejściem z nich jest użycie identyfikatora HTML lub klasy dla selektorów CSS. Jeśli jednak Twój motyw ma jakieś ograniczenia, następną najlepszą opcją jest dodanie funkcji PHP w celu zastosowania CSS. Wreszcie, jeśli musisz zastosować duże skrypty CSS dla określonej strony lub posta, umieszczenie ich w pliku CSS jest dla Ciebie najbardziej odpowiednim podejściem.

Jeśli chcesz używać więcej CSS w swojej witrynie, mamy również samouczki umożliwiające dostosowanie menu Divi za pomocą CSS lub programową edycję sklepu WooCommerce. Podobnie możesz jeszcze bardziej dostosować swoje strony i posty za pomocą naszych przewodników, aby programowo tworzyć posty i strony, przekształcać posty w stronę, tworzyć niestandardowe typy postów, a nawet dodawać posty do strony w WordPress.

Czy możesz teraz zastosować CSS do określonych stron lub postów? Czy ten samouczek był pomocny? Daj nam znać w komentarzach. W międzyczasie oto kilka artykułów, które warto odwiedzić:

• Jak przekonwertować/zmienić typ postu w WordPress
• Twórz programowo niestandardowy typ posta WordPress
• Jak dostosować stronę koszyka WooCommerce?