Jak napisać niestandardowy kod w swoich postach WordPress
Istnieje wiele powodów, dla których warto pisać lub dołączać dodatkowy kod do swoich postów WordPress. Może zaistnieć potrzeba wyświetlenia reklamy, zastosowania unikalnej stylizacji w niektórych sekcjach witryny lub po prostu zaznaczenia tekstu lub treści, aby przyciągnąć uwagę. Mimo to możesz dodać kod, aby uzyskać różne efekty wizualne, aby zapewnić lepsze doświadczenie użytkownika.
Wszystkie te i inne powody są uzasadnione, ale niezależnie od tego, co chcesz osiągnąć za pomocą niestandardowego kodu, proces pisania kodu może być stresujący lub po prostu trudny! W tym samouczku omówimy następujące obszary:
- Dodanie kodu, który wygląda jak kod, ale nie zachowuje się jak kod (w przypadku, gdy chcesz zaprezentować linie kodu lub poprawić wygląd swojej witryny)
- Dodanie kodu, który ma zachowywać się jak kod, np. Reklamy skryptowe, takie jak reklamy Google Adsense
W ramach tych dwóch kategorii zagłębimy się trochę w kod programowania, taki jak HTML, CSS, JavaScript, a także zajmiemy się reklamami i pięknem kontenera <div>. Teraz, bez zbędnych 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 zaprezentować kod (być może jesteś projektantem stron internetowych lub programistą), który Twoi użytkownicy będą mogli kopiować i wklejać, ważne jest, aby zrobić to dobrze, ponieważ nawet jedno przerwanie wiersza może zepsuć kod, a co za tym idzie, cała Twoja praca. Sposób, w jaki Twój kod będzie interpretowany przez WordPress, zależy od tego, czy korzystasz z edytora HTML, czy Visual Post. Wpisanie kodu bezpośrednio do edytora wizualnego nie przyniesie efektu, jaki chcesz uzyskać, ponieważ edytor wizualny traktuje kod jako zwykły tekst, co oznacza, że przeglądarki internetowe nie będą interpretować Twojego kodu jako „kodu”, ale jako zwykły tekst.
Z drugiej strony, HTML Post Editor rozpozna wszelkie używane znaczniki HTML lub CSS, co oznacza, że zostaną one zinterpretowane przez przeglądarkę internetową, co może skutkować pomieszaniem układu i funkyjnie wyglądającą treścią. Na przykład <div> w edytorze wizualnym zostanie zinterpretowany jako zwykły tekst, a wynikiem będzie po prostu <div>. Jednak <div> w edytorze HTML zostanie zinterpretowany jako znacznik HTML, a wynikiem będzie utworzenie kontenera.
Ćwiczenie HTML
To naprawdę ćwiczenie na daremność, ale możesz spróbować, aby uzyskać jaśniejszy obraz tego, co mam na myśli. Po prostu otwórz edytor HTML, wpisz <div> i zapisz go jako wersję roboczą. Po zapisaniu wersji roboczej kliknij „Podgląd wpisu”, aby wyświetlić zniekształconą witrynę. Nie martw się, nie jest to trwałe i możesz po prostu wyrzucić wersję roboczą. Teraz wracamy do interesów.
Ogólnie rzecz biorąc, możesz używać kodu na dwa sposoby. Po pierwsze, możesz użyć kodu w wierszu (lub akapicie), aby wyjaśnić kwestię dotyczącą swojego kodu. Po drugie, możesz napisać, zaznaczyć i umieścić swój kod w bloku takim jak ten:
<html>
<head>
<title>Writing Code in WordPress Posts Tutorial</title>
<link rel="stylesheet" type="text/css" href="somefile.css"/>
</head>
<body>...</body>
</html>
Aby osiągnąć powyższy efekt używamy znacznika code zapisanego w stylu …tutaj umieszczamy nasz kod . Zastąp strzałki (< >) nawiasami kwadratowymi ( [ ]) w zależności od witryny WordPress i edytora postów, którego używasz (wizualnego lub HTML). Kod, który chcesz wyświetlić, musi znajdować się pomiędzy tagiem otwierającym i tagiem zamykającym . Na przykład, aby użyć kodu w akapicie:
Znacznik code sprawia, że tekst inny niż HTML wygląda jak kod, ale nie informuje przeglądarki internetowej, aby interpretowała znaczniki HTML lub usuwała je z posta. Oznacza to, że przeglądarka nadal może kodować znaczniki HTML, co utrudnia prezentowanie tagów HTML w kodzie. Można jednak przezwyciężyć ten problem, używając znaków rozszerzonych lub jednostek znakowych do reprezentowania znaków < >, co oszuka każdą przeglądarkę. Na przykład…
…utworzy nowy kontener (dzięki <div>) i nagłówek ( <h1>), co spowoduje bałagan na Twojej stronie. Ale jeśli użyjesz jednostek znakowych do zastąpienia strzałek < >, unikniesz tego zachowania i wygenerujesz kod zgodnie z potrzebami. Powyższy kod będzie więc wyglądał następująco:
Utwórz wyróżniony blok kodu
Jeśli chciałbym zaznaczyć blok kodu (lub nawet tekst), aby uzyskać coś takiego;
Zaczynam od umieszczenia kodu (lub tekstu) w takim kontenerze:
Następnie dodaję styl za pomocą CSS bezpośrednio (jak na obrazku powyżej) lub poprzez plik style.css znajdujący się w głównym folderze motywu.
Stylizuj znaczniki kodu
Znacznik code użyje rozmiaru czcionki z <body> i domyślnie umieści tekst czcionką o stałej szerokości. Możesz to wszystko zmienić, aby Twój kod wyglądał dokładnie tak, jak chcesz. Wystarczy, że dodasz…
code{font-size:1.2em; color:#000; font-weight:normal;} …lub coś podobnego do Twojego style.css. Stylów jest nieograniczona liczba i wszystko zależy od Twoich osobistych preferencji, więc nie wahaj się – stylizuj dalej.
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 JavaScript w Twoich postach. Chociaż istnieją wtyczki, takie jak Quick Adsense, które pomogą Ci zarządzać reklamami w Twoich postach, możesz zainteresować się instalacją samodzielnych skryptów, nad którymi masz pełną kontrolę.
Jeśli Twoje ogłoszenie składa się z prostego obrazu i linku, możesz dodać reklamę do swojego posta za pomocą narzędzia do przesyłania. Po prostu prześlij obraz, wprowadź link (i być może podpis) i gotowe. Ta metoda jest jednak ograniczona, ponieważ możesz ustawić reklamę tylko w lewo, w prawo lub na środku – tak jak typowy obraz. Alternatywnie możesz utworzyć kontener w swoim poście, korzystając z edytora HTML.
Przykład :
<div id="ad1">
<a href="ad_link"><img src="image_location" height="yy" width="xx" alt="Ad_title"/>
</a>
</div>
Utwórz ten kontener dokładnie tam, gdzie chcesz umieścić ogłoszenie, co oznacza, że musisz przygotować post przed dodaniem ogłoszenia. Gdy pojemnik będzie już gotowy, możesz nadać mu dowolną stylizację. Możesz go przenosić za pomocą pliku style.css, korzystając z właściwości position. Jeśli chcesz wyświetlać reklamę Google Adsense w swoich postach, nadal możesz skorzystać z wtyczki Quick Adsense lub utworzyć kontener i umieścić kod reklamy w następujący sposób:
<div id="ad1">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Uwaga 1: reklamy Google są oparte na języku JavaScript i mogą być interpretowane przez wszystkie główne przeglądarki internetowe, pod warunkiem, że użytkownik włączył obsługę języka 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 (obecnych i przyszłych) bez dodatkowej pracy, musisz edytować szablon pojedynczego postu (single.php ). Umieściłem reklamę o wymiarach 468 na 60 pikseli na górze wszystkich moich postów, dodając następujący kod do single.php bezpośrednio po < – – END post-entry-meta – ->.
<div id="ad1"> <script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Oczywiście trzeba korzystać z własnego Google Ads ? Tak prezentuje się reklama Google Adsense na moim blogu:
Aby znaleźć single.php, przejdź do Panelu administracyjnego –>> Wygląd –>> Edytor –>> single.php. Po otwarciu single.php skorzystaj z wyszukiwarki pasek (Ctrl + F), aby zlokalizować < – – END post-meta – ->.
Możesz pozostawić kontener bez zmian lub nadać mu styl przy użyciu pliku style.css, według własnego uznania. I pamiętaj, aby zapisać wszystkie zmiany. Kontener <div> jest naprawdę przydatny, a jeśli połączysz go z CSS i odrobiną kreatywności, możesz osiągnąć wiele dzięki swojej witrynie WordPress. Może pomóc Ci umieścić dowolny kod (lub cokolwiek innego) w dowolnym miejscu Twojej witryny.
Zestaw narzędzi
Jeśli chcesz dowiedzieć się więcej o pisaniu niestandardowego kodu w swoich postach WordPress, zapoznaj się z następującymi zasobami:
- Pisanie kodu w swoich postach
- Zabawne postacie
- Używanie JavaScriptu w postach
- Używanie HTML w postach WordPress
- Pisanie bezpiecznego kodu WordPress (Udostępnianie slajdów)
Cóż, to wszystko. Udało nam się objąć obszary, które zarysowaliśmy na początku. Jeśli jednak nie rozumiesz żadnej koncepcji zawartej w tym poście lub chcesz dodać swoje sugestie lub opinie, podziel się swoimi przemyśleniami w sekcji komentarzy poniżej!