W artykule:
Istnieje wiele powodów, dla których chcesz napisać lub dołączyć dodatkowy kod do swoich postów WordPress. Może być konieczne wyświetlenie reklamy, zastosowanie unikalnej stylizacji do niektórych sekcji witryny lub po prostu zaznaczenie tekstu lub treści, aby przyciągnąć uwagę. Mimo to możesz dodać kod, aby uzyskać różne efekty wizualne, aby zapewnić lepsze wrażenia użytkownika.
Wszystkie te i inne są ważnymi powodami, ale bez względu na to, co chcesz osiągnąć za pomocą niestandardowego kodu, proces pisania kodu może być nerwowy lub wręcz trudny! W tym samouczku omówimy następujące obszary:
- Dodawanie kodu, który wygląda jak kod, ale nie zachowuje się jak kod (okrywać chcesz zaprezentować linie kodu lub poprawić wygląd swojej witryny)
- Dodawanie 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 programowanie kodu, takiego jak HTML, CSS, Javascript i dotkniemy reklam i piękna kontenera <div>. Teraz, bez dalszych fanfar, przejdźmy do interesów i napiszmy jakiś kod.
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 użytkownicy mogą skopiować i wkleić, ważne jest, aby zrobić to dobrze, ponieważ nawet pojedynczy podział linii może zepsuć kod, stąd cała Twoja praca. Sposób, w jaki twój kod będzie interpretowany przez WordPress, zależy od tego, czy używasz edytora HTML, czy Visual Post. Wprowadzenie 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 „kod”, ale jako zwykły tekst.
Z drugiej strony edytor postów HTML rozpozna wszelkie używane znaczniki HTML lub CSS, co oznacza, że będą one interpretowane przez przeglądarkę internetową, co może skutkować pomieszanymi układami i funky looking content. Na przykład < div > w edytorze wizualnym będzie interpretowany jako zwykły tekst, a wynik będzie po prostu <div>. Jednak <div > w edytorze HTML będzie interpretowane jako znaczniki HTML, a rezultatem będzie utworzenie kontenera.
Ćwiczenie HTML
To ć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 postu”, aby zobaczyć swój mangled website. Nie martw się, to nie jest trwałe i możesz po prostu zniszczyć projekt. Wracamy do interesów.
Ogólnie można używać kodu na dwa sposoby. Po pierwsze, możesz użyć kodu w wierszu (lub akapicie), aby wyjaśnić punkt o kodzie. Po drugie, możesz napisać, wyróżnić i umieścić swój kod w bloku takim jak ten:
< html>
< head>
< title>pisanie kodu w postach WordPress Tutorial< / title>
< link rel=" stylesheet"type=" text/css"href =" somefile.css" / >
< / head>
< body>...< / body>
< / html>
Aby osiągnąć powyższy efekt, używamy znacznika kodu napisanego jak < code> … nasz kod idzie tutaj < / code>. Zastąp strzałki ( < > ) nawiasami kwadratowymi ([]) 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ę pomiędzy znacznikiem otwierającym, <code> i znacznikiem zamykającym, </code>. Na przykład, aby użyć kodu w akapicie:
Znacznik kodu sprawia, że tekst inny niż HTML wygląda jak kod, ale nie mówi przeglądarce internetowej, aby interpretowała znaczniki HTML lub usuwała je 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 rozszerzonych znaków lub encji znaków do reprezentowania znaków< >, co zmyli każdą przeglądarkę. Na przykład…
… utworzy nowy kontener (dzięki <div>) I nagłówek (<h1>), który zniszczy twoją stronę internetową. Ale jeśli użyjesz encji znaków do zastąpienia strzałek< >, unikniesz tego zachowania i wyprowadzisz kod zgodnie z życzeniem. Powyższy kod będzie więc wyglądał następująco:
Utwórz podświetlony Blok kodu
Jeśli chciałbym wyróżnić blok kodu (lub nawet tekst), aby uzyskać coś takiego;
Zaczynam od umieszczenia kodu (lub tekstu) w kontenerze w taki sposób:
Następnie dodaję styl używając CSS bezpośrednio (jak na powyższym obrazku) lub poprzez styl.css plik znaleziony w głównym folderze motywu.
Styluj Znaczniki Kodu
Znacznik kodu będzie używał rozmiaru czcionki z < body> i domyślnie umieszcza tekst w czcionce z pojedynczą czcionką. Możesz to wszystko zmienić, aby Twój kod wyglądał tak, jak chcesz. Wystarczy dodać…
code{font-size:1.2 em; color:#000; font-weight:normal;}
… lub coś podobnego do twojego styl.css. Istnieje nieograniczona liczba stylów i wszystko zależy od osobistych preferencji, więc nie powstrzymuj się od stylu.
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 swoich postach. Chociaż istnieją wtyczki, takie jak Quick Adsense, które pomogą Ci zarządzać reklamami w Twoich postach, możesz być zainteresowany instalowaniem samodzielnych skryptów, nad którymi masz pełną kontrolę.
Jeśli Twoja reklama jest prostym obrazem i linkiem,możesz dodać reklamę do swojego posta za pomocą narzędzia do przesyłania. Wystarczy przesłać zdjęcie i wpisać swój link (i być może podpis) i Twoja praca jest skończona. Ta metoda jest jednak ograniczona, ponieważ możesz ustawić reklamę tylko w lewo, w prawo lub w centrum – tak jak typowy obraz. Alternatywnie możesz utworzyć kontener w swoim poście za pomocą 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 swoją reklamę, co oznacza, że musisz mieć gotowy post przed dodaniem reklamy. Gdy pojemnik jest gotowy, możesz go dowolnie stylować. Możesz go przenosić, używając swojego stylu.css za pomocą położenie własność. Jeśli chcesz uruchomić Reklama Google Adsense w swoich postach możesz nadal używać Quick Adsense-wtyczki-lub utworzyć kontener i umieścić kod reklamowy w ten 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 Javascript i mogą być interpretowane przez wszystkie główne przeglądarki internetowe, pod warunkiem, że użytkownik włączył Javascript na swoich maszynach.
Uwaga 2: Musisz wybrać odpowiednie wymiary reklam dla swojej witryny, aby uniknąć brudzenia postów, a także strony internetowej.
Jeśli chcesz dodać stałą reklamę, która pojawi się we wszystkich Twoich postach (obecnych i przyszłych) bez dodatkowej pracy, musisz edytować Szablon pojedynczego postu(singelphp). Zamieściłem reklamę 468px na 60px na górze wszystkich moich postów dodając następujący kod do singiel.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łasnych Google Ads 🙂 w ten sposób reklama Google Adsense pojawia się na moim blogu:
Aby znaleźć singiel.php, przejdź do swojej Panel administracyjny – > > wygląd – > > edytor – > > pojedynczy.php. Raz samotny.php jest otwarte, użyj paska wyszukiwania (Ctrl + F ) aby zlokalizować < – – END post-entry-meta – ->.
Możesz zostawić pojemnik w stanie, w jakim jest lub wystylizować go za pomocą stylu.css jak uważasz. I pamiętaj, aby zapisać wszystkie zmiany. Kontener < div > 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.
Skrzynka Narzędziowa
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 postach
- Zabawne Postacie
- Używanie Javascript w postach
- Używanie HTML w postach WordPress
- Pisanie Bezpiecznego Kodu WordPress (Slideshare)
To wszystko. Udało nam się pokryć 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 poglądy, podziel się swoimi przemyśleniami w sekcji komentarzy poniżej!
