Istnieje wiele powodów, dla których chcesz napisać lub dołączyć dodatkowy kod do swoich postów WordPress. Może być konieczne pokazanie reklamy, zastosowanie unikatowego stylu w niektórych sekcjach witryny lub po prostu zaznaczenie tekstu lub treści, aby zwrócić na siebie uwagę. Mimo to możesz dodać kod, aby uzyskać różne efekty wizualne i zapewnić lepszą obsługę.


Wszystkie te i inne są uzasadnione powody, ale bez względu na to, co chcesz osiągnąć dzięki niestandardowemu kodowi, proces pisania kodu może być nerwowy lub wręcz trudny! W tym samouczku omówimy następujące obszary:

  • Dodanie kodu, który wygląda jak kod, ale nie zachowuje się jak kod (na przykład, aby wyświetlić wiersze kodu lub poprawić wygląd witryny)
  • Dodanie kodu, który ma zachowywać się jak kod, np. Skrypty reklamowe, takie jak Google Adsense Ads

W tych dwóch kategoriach zajmiemy się trochę kodowaniem programowania, takim jak HTML, CSS, JavaScript, i dotkniemy reklam i piękna

pojemnik. Teraz, bez dalszych fanfar, zabierzmy się do pracy i napiszmy trochę kodu.

Dodawanie kodu, który wygląda jak kod, ale nie zachowuje się jak kod

Jeśli chcesz pokazać kod (być może jesteś projektantem stron internetowych lub programistą), który użytkownicy mogą kopiować i wklejać, ważne jest, aby zrobić to dobrze, ponieważ nawet pojedynczy podział linii może zepsuć kod, dlatego cała twoja praca. Sposób interpretacji kodu przez WordPress zależy od tego, czy korzystasz z edytora HTML czy Visual Post. Wpisanie kodu bezpośrednio do edytora wizualnego nie przyniesie efektu, który chcesz utworzyć, ponieważ edytor wizualny uważa kod za normalny tekst, co oznacza, że ​​przeglądarki internetowe nie będą interpretować kodu jako „kodu”, ale jako zwykłego tekstu.

Z drugiej strony, edytor postów HTML rozpozna wszelkie użyte znaczniki HTML lub CSS, co oznacza, że ​​będą one interpretowane przez przeglądarkę internetową, co może doprowadzić do pomieszania układów i funky wyglądającej zawartości. Na przykład, 

w edytorze wizualnym będzie interpretowany jako zwykły tekst, a wynik będzie sprawiedliwy

. jednak,

 w edytorze HTML będą interpretowane jako znaczniki HTML, a wynikiem będzie utworzenie kontenera.

Ćwiczenie HTML

To naprawdę ćwiczenie na próżno, ale możesz spróbować, aby uzyskać wyraźniejszy obraz tego, co mam na myśli. Po prostu otwórz Edytor HTML, rodzaj

i zapisz go jako wersję roboczą. Po zapisaniu wersji roboczej kliknij „Podgląd postu”, aby ją zobaczyć zniekształcona strona internetowa. Nie martw się, to nie jest trwałe i możesz po prostu wyrzucić projekt. Teraz wracamy do biznesu.

Zasadniczo można używać kodu na dwa sposoby. Po pierwsze, możesz użyć kodu w linii (lub akapicie), aby wyjaśnić punkt na temat swojego kodu. Po drugie, możesz pisać, wyróżniać i wstawiać kod w taki blok:



Pisanie kodu w samouczku dotyczącym postów WordPress


...

Aby osiągnąć powyższy efekt, używamy tagu kodu napisanego jak … Nasz kod jest tutaj . Zastępcze strzałki (<  >) W nawiasach kwadratowych ([]) w zależności od witryny WordPress i używanego edytora postów (wizualnego lub HTML). Kod, który chcesz wyświetlić, musi znajdować się między tagiem otwierającym,   i tag zamykający, . Na przykład, aby użyć kodu w akapicie:

Kod w akapicie

Tag kodu sprawia, że ​​tekst inny niż HTML wygląda jak kod, ale nie każe przeglądarce internetowej interpretować znaczników HTML ani usuwać go z posta. Oznacza to, że przeglądarka może nadal kodować znaczniki HTML, co utrudnia prezentację Tagi HTML w twoim kodzie. Możesz jednak rozwiązać ten problem, używając znaków rozszerzonych lub bytów znaków do reprezentowania < > znaki, które oszukają każdą przeglądarkę. Na przykład…

Tagi HTML można interpretować jako znaczniki HTML

… Stworzy nowy kontener (dzięki

) i nagłówek (

), co zepsuje twoją stronę internetową. Ale jeśli użyjesz bytów znaków do zastąpienia < > strzałki, unikniesz tego zachowania i wygenerujesz kod zgodnie z potrzebami. Powyższy kod będzie więc wyglądał następująco:

Zamiast tego używaj elementów postaci

Utwórz wyróżniony blok kodu

Jeśli chciałbym podświetlić blok kodu (lub nawet tekst), aby uzyskać coś takiego;

Blok kodu

Zaczynam od umieszczenia kodu (lub tekstu) w kontenerze w następujący sposób:

Musisz to zrobić w edytorze HTML

Następnie dodaję styl za pomocą CSS albo bezpośrednio (jak na powyższym obrazku) lub poprzez style.css plik znaleziony w głównym folderze motywu.

Styluj tagi kodu

Tag kodu użyje rozmiaru czcionki z i domyślnie umieść tekst czcionką o stałej szerokości. Możesz to wszystko zmienić, aby Twój kod wyglądał dokładnie tak, jak chcesz. Wystarczy dodać…

 kod {font-size: 1.2em; kolor: # 000; font-weight: normal;} 

… Lub coś podobnego do twojego style.css. Istnieje nieograniczona liczba stylów i wszystko zależy od osobistych preferencji, więc nie powstrzymuj się – styl.

Dodawanie kodu, który zachowuje się jak kod

Ta sekcja jest szczególnie przydatna, jeśli chcesz wyświetlać reklamy lub inne skrypty, np. Fragmenty kodu JavaScript w swoich postach. Chociaż istnieją wtyczki, takie jak Szybki AdSense, które pomogą Ci zarządzać reklamami w swoich postach, możesz być zainteresowany instalacją samodzielnych skryptów, nad którymi masz pełną kontrolę.

Jeśli reklama jest prostym obrazem i linkiem, możesz dodać reklamę do swojego posta za pomocą narzędzia do przesyłania. Wystarczy załadować obraz i wprowadzić swój link (i być może podpis), a praca zostanie wykonana. Ta metoda jest ograniczona, ponieważ możesz wyrównać reklamę tylko w lewo, w prawo lub w środku – tak jak typowy obraz. Alternatywnie możesz utworzyć kontener w swoim poście za pomocą edytora HTML.

Przykład:


Utwórz ten kontener dokładnie tam, gdzie chcesz mieć swoją reklamę, co oznacza, że ​​musisz mieć gotowy post przed dodaniem reklamy. Gdy pojemnik będzie gotowy, możesz go stylizować w dowolny sposób. Możesz go przenosić, używając swojego style.css, używając pozycja własność. Jeśli chcesz uruchomić Reklama Google Adsense nadal możesz używać swoich postów Szybki AdSense – wtyczka – lub utwórz kontener i umieść kod reklamy w następujący sposób:


Notatka 1: Reklamy Google są oparte na Javascript i mogą być interpretowane przez wszystkie główne przeglądarki internetowe, pod warunkiem, że użytkownik włączył Javascript na swoich komputerach.

Uwaga 2: Musisz wybrać odpowiednie wymiary reklamy dla swojej witryny, aby uniknąć zepsucia postów i witryny.

Jeśli chcesz dodać stałą reklamę, która będzie wyświetlana we wszystkich Twoich postach (bieżących i przyszłych postach) bez dodatkowej pracy, musisz edytować Szablon pojedynczego postu (single.php). Umieściłem ogłoszenie o wymiarach 468 na 60 pikseli na górze wszystkich moich postów, dodając następujący kod do single.php natychmiast po < – – END post-entry-meta – ->.


Oczywiście musisz używać własnych reklam Google �� Tak wygląda reklama Google Adsense na moim blogu:

Pisanie kodu w WordPress

Znaleźć single.php, idź do swojego Panel administracyjny – >> Wygląd – >> Edytor – >> single.php. Po otwarciu single.php użyj paska wyszukiwania (Ctrl + F) zlokalizować < – – END post-entry-meta – ->.

Możesz opuścić kontener takim, jaki jest, lub nadać mu styl, używając style.css, jeśli uważasz, że pasuje. I pamiętaj, aby zapisać wszystkie zmiany. The

Kontener jest naprawdę przydatny, a kiedy połączysz go z CSS i odrobiną kreatywności, możesz osiągnąć tak wiele dzięki swojej witrynie WordPress. Może pomóc Ci umieścić dowolny kod (lub cokolwiek naprawdę) w dowolnym miejscu na Twojej stronie.

Zestaw narzędzi

Jeśli chcesz dowiedzieć się więcej na temat pisania niestandardowego kodu w swoich postach WordPress, zapoznaj się z następującymi zasobami:

Cóż, o to chodzi. Udało nam się objąć obszary, które opisaliśmy na początku. Ale jeśli nie rozumiesz żadnej koncepcji w tym poście lub chcesz dodać swoje sugestie lub opinie, podziel się swoimi przemyśleniami w sekcji komentarzy poniżej!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me