Formatowanie Postów Bloga i Podstawowy HTML

Formatowanie Postów Bloga nie wymaga od Ciebie znajomości HTML, ale zdecydowanie pomaga!

Jeśli chcesz, aby Twój blog był traktowany poważnie, musisz opanować formatowanie Postów Bloga.

Oznacza to również naukę kilku podstawowych sztuczek HTML, które pomogą uczynić twoje artykuły interesującymi i konsekwentnie stylizowanymi.

Nie martw się, nie mówię, że musisz zostać programistą lub czymkolwiek, aby stworzyć atrakcyjne i nieinformacyjne posty na blogu, ale podniesienie kilku istotnych umiejętności bardzo pomoże.

WordPress to CMS (System Zarządzania Treścią) i jako taki nie wymaga od ciebie samodzielnego kodowania wszystkiego.

Są do tego narzędzia.

Większość kodu jest ukryta, aby uniknąć zepsucia czegokolwiek i masz edytor WYSIWYG (What You See is What You Get) do pisania i formatowania postów na blogu i stron.

Jeśli używasz WordPressa przez jakiś czas, to będziesz wiedział, że istnieje zarówno wizualna, jak i tekstowa zakładka w prawym górnym rogu edytora treści, która pozwala na przełączanie się ze stylizowanej wersji postu i surowego HTML.

Dla początkujących.

Visual = WordPress Visual Editor

Text = WordPress HTML Editor / Raw Text

Większość początkujących jest przytłoczona i przestraszona, gdy widzą surowy HTML na karcie tekstowej po raz pierwszy i szybko powracają.

Ale tak nie musi być i staniesz się o wiele lepszym blogerem, poświęcając czas na wygodną pracę i edycję w tym trybie.

Przy odrobinie praktyki możesz łatwo opanować niektóre z podstaw, składnia jest właściwie dość logiczna.

Syntaktyka (Definicja komputerowa): Struktura wypowiedzi w języku komputerowym.

Co to jest HTML?

HTML oznacza Hypertext Markup Language i jest językiem programowania używanym do tworzenia stron internetowych i aplikacji.

HTML pozwala na tworzenie podstawowej funkcjonalności, którą można następnie stylizować za pomocą CSS (Cascading Style Sheets).

Został on stworzony w 1990 roku przez Tima Berners-Lee, mojego osobistego bohatera, któremu również przypisuje się wynalezienie Internetu, ale nie zamierzam uczyć cię wszystkiego o HTML i historii, ale jeśli jesteś ciekawski, możesz kontynuować czytanie na Wikipedii.

Jesteśmy tutaj, aby spojrzeć na to, jak HTML odnosi się do pisania i edytowania postów i stron WordPress.

Gdy widzisz nieznany kod w zakładce Tekst edytora WordPress, patrzysz na HTML, a w niektórych przypadkach może zawierać niektóre style inline CSS.

PrzykładHTML

<h2>This is a title</h2>

Części, które są podświetlone na czerwono to HTML i w tym przykładzie, widzisz otwierający tag tytułowy h2 na początku i zamykający tag tytułowy h2 na końcu.

Zauważ jedyną różnicę jest to, że zamykający tag ma odwrotny ukośnik przed nazwą tagu? W ten sposób możesz szybko zobaczyć, kiedy twój HTML został otwarty i zamknięty.

Jest to świetna wskazówka do wykrywania błędów lub uszkodzonego HTML.

HTML z Inline CSS Przykład

<h2 style="color:red;">This is a title</h2>

W powyższym przykładzie, użyliśmy tego samego h2, jednak tym razem użyliśmy HTML do wywołania jednego kawałka CSS, aby zmienić kolor na czerwony. Zauważ, że jedyna część, która jest faktycznie CSS jest podświetlona na czerwono.

Nie zobaczysz zbyt wiele inline CSS, ponieważ najlepszym sposobem jest stylizowanie elementów HTML za pomocą zewnętrznych plików CSS, jest to typowy sposób, w jaki motywy WordPress automatycznie stosują style na stronie twojego bloga.

Ja osobiście nie radzę stylizować swojego HTML inline w edytorze WordPress, ale ważne jest, aby być tego świadomym w przypadku, gdy kiedykolwiek będziesz musiał edytować lub wyczyścić kod, który znalazł swoją drogę z innych źródeł, takich jak wtyczki lub z kopiowania i wklejania z innego źródła.

Nieuchronnie skorzystasz z możliwości czyszczenia rzeczy, gdy gremliny (nie jest to termin techniczny) znajdą drogę do twojej zawartości.

Więc spójrzmy na to, jak dodać HTML do postów WordPressa, postów i stron i co musisz wiedzieć.

WordPress Basic HTML Essentials

Gdy dodajesz HTML do stylizacji swojej zawartości, musisz pamiętać, aby zawinąć swoją zawartość za pomocą odpowiednich znaczników otwierających i zamykających.

Przykład:

<p>Paragraphs should be wrapped with p tags</p>

Istnieją przykłady użytecznych elementów HTML, które nie wymagają znacznika zamykającego, ponieważ są samozamykające.

Jednym z przykładów jest łamanie linii <br>, które będzie działać bez znacznika zamykającego, dzieje się tak dlatego, że łamanie linii nie zawiera i nie może zawierać treści wewnątrz.

Znaczniki nagłówków & Nagłówki podrzędne

Istnieją różne rodzaje nagłówków w poście WordPress, po pierwsze, masz nagłówek tytułu postu, jest to nagłówek <h1>, a następnie masz możliwość dodawania tytułów nagłówków do swoich treści, aby pomóc Ci pogrupować swoje myśli.

Są to nagłówki od h1 (Nagłówek 1) do h6 (Nagłówek 6), a twój motyw zazwyczaj będzie je stylizował, aby były odpowiednio duże.

Ponieważ twój tytuł strony lub postu jest automatycznie h1, chcesz uniknąć używania go w swojej treści, ponieważ wszelkie inne przypadki będą konkurować z głównym tytułem, który jest nazwą twojego postu.

Zamiast tego postępuj zgodnie z semantycznie poprawnym procesem zamawiania i za pierwszym razem, gdy musisz użyć nagłówka sekcji, przesuń się w dół do tytułu nagłówka h2.

Mimo, że możesz je łatwo ustawić za pomocą rozwijanej listy w lewym górnym rogu edytora postów WYSIWYG, warto wiedzieć, jak działają w formacie HTML, abyś mógł poprawić wszelkie błędy.

Tutaj jest kilka przykładów

<h1>This is a heading 1, you won't need to use me in your content</h1>
<h2>This is a heading 2, I'm very useful, you can use me to organize your articles into sections.</h2>
<h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3>
<h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>

Mam nadzieję, że zaczynasz widzieć wzór tutaj ze składnią HTML.

Wszystkie elementy HTML rozpoczynają się od otwierającego <

Zamykają się również zamykającym >

Otwierające elementy mogą po prostu zawierać nazwę elementu.

Zamykające znaczniki zawierają ukośnik w przód po otwierającym < i przed nazwą elementu HTML, który zamykają.

Już samo zaznajomienie się z powyższym pozwoli Ci być o krok przed większością blogerów korzystających z WordPressa.

Pogrubienie lub kursywa

Gdy chcesz podkreślić punkt i zwrócić uwagę na pewne słowa, możesz chcieć użyć pogrubienia lub kursywy, aby je wyróżnić.

Zdecydowanie wolę to podejście od ALL CAPS, które dla mnie jest jak krzyk.

HTML dla pogrubienia to <strong>, a dla kursywy to <em>.

Fun fact: Strong jest łatwy do zapamiętania przy pogrubianiu, ale dlaczego element italics używa em? Em jest skrótem od podkreślenia. To może pomóc mu się trzymać.

<em>This text is italicized, I am for gentle emphasis</em>

<strong>This text is bold, I am for strong emphasis</strong>

Dodatkowo, możesz użyć WordPress WYSIWYG oczywiście lub skrótu klawiaturowego CTRL + B dla pogrubienia i CTRL + I dla kursywy po podświetleniu tekstu, który chcesz zmodyfikować.

Dla pełnej listy skrótów klawiaturowych WordPress i innych formatowań, metod przejdź tutaj.

Istnieją pewne zasady dotyczące tego, jak powinieneś i nie powinieneś ich używać, w tym utrzymywanie ich wzajemnie się wykluczających, rezerwowanie ich dla krótkich zdań i używanie oszczędnie.

Praktyczna Typografia ma świetny artykuł wyjaśniający znaczenie tych zasad.

Jeśli piszesz kopię, aby naprawdę zaangażować ludzi, jak sprzedaż-kopia to te zasady mogą być naginane, ale nie łamane.

emphasis

Pamiętaj, jeśli wszystko jest podkreślone, to nic nie jest podkreślone!

Listy – Uporządkowane &Nieuporządkowane

Istnieją dwa rodzaje list, które możesz dodać za pomocą HTML, które są również obsługiwane przez WordPress WYSIWYG.

Są to:

Listy uporządkowane – <ol>

Listy uporządkowane wyświetlają się jako seria ponumerowanych elementów. Jest to przydatne podczas pisania listy, w której kolejność ma znaczenie.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Powyższy kod zamienia się w:

1. Item 1
2. Item 2
3. Item 3

Listy nieuporządkowane – <ul>

Listy nieuporządkowane są zasadniczo listami wypunktowanymi.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

A ta zamienia się w poniższą listę wypunktowaną.

• Item 1
• Item 2
• Item 3

Wszyscy wiemy jak przydatne są listy, które pomagają również rozbić Twoją treść i sprawić, że wygląda ona ciekawiej.

Jedną kluczową różnicą, którą zauważysz tutaj jest to, że istnieją pojedyncze elementy listy <li> i są one zawijane w całości za pomocą jednego <ol> lub <ul> wrappera.

Jest to ważne, aby być świadomym, ponieważ jeśli brakuje wrappera <ol> lub <ul>, elementy listy nie będą renderowane.

Obrazy

Innym ważnym aspektem formatowania wpisu na blogu lub dowolnej strony z WordPress jest użycie obrazów i nie powinieneś mieć problemów ze znalezieniem interesujących zdjęć, które możesz uzyskać z obrazów Yahoo i innych witryn z obrazami wolnymi od praw autorskich. Niektóre z tych opcji są płatne, ale wiele z nich jest darmowych, pod warunkiem, że dasz kredyt ze wzmianką o źródle i linkiem.

Niewielka cena za profesjonalne wizualizacje na twojej stronie internetowej lub blogu.

Zdjęcie jest warte tysiąca słów, jak mówią, dostarczają one również czytelnikom bodźców wizualnych, jak również pauzy, aby pomóc przełamać treść na strawne kawałki.

To pomaga utrzymać zaangażowanie czytelników i podczas gdy nie musisz sam kodować obrazów, zrozumienie składni jest przydatne.

Tutaj jest przykład kodu obrazu i jak będzie wyglądał, gdy spojrzysz na zakładkę Tekst w swoim edytorze.

<img src="https://mazepress.com/image.png">

Obraz nie wymaga znacznika zamykającego, ponieważ wszystkie informacje, których potrzebuje są zawarte w nawiasach otwierających i zamykających elementu HTML. The src po prostu nazywa lokalizację adresu URL.

WordPress pozwala na spławianie obrazów w lewo, w prawo lub możesz je wyśrodkować. Jeśli to zrobisz i sprawdzisz kod w zakładce Tekst, zobaczysz, że zostały dodane klasy, które są używane do odpowiedniego stylizowania obrazów.

Jest to przykład, w którym zewnętrzny CSS jest używany do stosowania różnych stylów do różnych obrazów. Przydatna wiedza!

Ważne: Przed dodaniem obrazów do swoich postów i stron upewnij się, że są one zoptymalizowane pod kątem szybkości i wyszukiwarek.

Embeds

Nieuchronnie będziesz chciał użyć kodów embed z zewnętrznych stron internetowych.

Jednym z przykładów jest, gdy chcesz dodać wideo z YouTube lub Vimeo, idziesz do udostępniania i daje ci jakiś długi kod, który możesz skopiować.

Główną rzeczą do zapamiętania jest to, że nie możesz wkleić HTML lub innego kodu do wizualnej zakładki edytora treści. W ten sposób kod zostanie zakodowany i stanie się bezużyteczny po zapisaniu.

Upewnij się, że przejdziesz do zakładki tekstowej, a następnie wklej go tam, gdzie chcesz, aby się pojawił.

Poniżej znajduje się przykład kodu osadzonego z YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

While WordPress pozwala po prostu wkleić adres URL YouTube do postu, aby wyświetlić go jako wideo, może to nie dać ci pełnej kontroli nad wymiarami wideo i innymi ustawieniami osadzania.

Z tego powodu, a także dlatego, że jestem starą szkołą, nadal używam kodu osadzania iframe.

Większość stron internetowych, które oferują kody osadzania, nie jest natywnie obsługiwana przez WordPress, a więc nadal będziesz musiał być świadomy kodów osadzania, iframe i tego, jak działają, aby móc dodawać multimedia do swoich postów.

Shortcodes

Shortcodes nie są HTML. W rzeczywistości nie są nawet językiem programowania, są natywną funkcją WordPressa, która pozwala programistom wtyczek i motywów tworzyć proste sposoby dla Ciebie i mnie, aby dodawać elementy do naszych stron internetowych i postów.

Najprostszy przykład, że funkcje na prawie każdym blogu jest formularz kontaktowy shortcode, ale istnieją setki, jeśli nie tysiące potencjalnych zastosowań dla shortcodes, które obejmują zdolność do dodawania:

• Tabele
• Galerie
• Pakiety cenowe
• Wideo
• Lead Magnets / Email Opt-in forms
• Podcast Episodes

Tutaj znajduje się shortcode dla formularza kontaktowego wygenerowanego przez wtyczkę Contact Form 7, jedną z naszych rekomendowanych wtyczek, którą instalujemy na 90% naszych stron i blogów.

Uwaga: Musiałem dodać spacje po nawiasie otwierającym i przed nawiasem zamykającym, aby powstrzymać go od faktycznego wyświetlania formularza kontaktowego, więc wyobraź sobie to bez spacji.

Uwaga składnia shortcode jest inna. Zaczynają się od nawiasu otwierającego zamiast < i >.

Są one następnie formatowane przez twórcę shortcode, aby ułatwić Ci dostosowanie i zmianę istotnych ustawień.

Gdy strona się ładuje, ten formularz kontaktowy faktycznie ładuje około 20 linii niechlujnego HTML, więc jest to o wiele łatwiejsze dla Ciebie, gdy możesz uzyskać dostęp do shortcode.

Jedynym zastrzeżeniem jest to, że nie chcesz nadużywać shortcode, ponieważ spowolnią one twoje strony internetowe.

Są one przydatne, aby wiedzieć o i mogą sprawić, że proces edycji postu będzie o wiele mniej uciążliwy, gdy nie musisz używać dużych ilości HTML, których nie rozumiesz i musisz pracować ostrożnie wokół.

Różne porady dotyczące formatowania

Istnieje kilka innych wskazówek, które radzę nowym studentom WordPressa, aby pamiętali, że zamierzam krótko pokryć.

Obejmują one:

• Nie dodawaj niepotrzebnych podziałów linii. Oznacza to, że staraj się nie używać znacznika HTML <br> i unikaj dwukrotnego naciskania enter pomiędzy akapitami i sekcjami, chyba że musisz to zrobić. To sprawia, że twoje artykuły wyglądają niechlujnie i jesteś zobowiązany do tworzenia niespójności.
• Nie dodawaj specyficznych dla strony rodzin czcionek, rozmiarów i kolorów – Ponownie to sprawia, że twoje posty wyglądają horrendalnie i jakby zostały stworzone w 1995 roku. Możesz myśleć, że niestandardowy rozmiar zielonego tytułu z unikalną czcionką przyciąga uwagę, gdy tak naprawdę wystaje jako niespójny i nieprofesjonalny. Twój motyw powinien dyktować te style.
• Nigdy nie dodawaj kodu HTML lub kodu osadzonego do zakładki wizualnej – Może to prowadzić do nieoczekiwanych rezultatów, wymagać wiele czyszczenia lub całkowicie zepsuć stronę.
• Nigdy nie przesyłaj filmów do WordPressa – Twój hosting strony nie jest zbudowany do dostarczania treści wideo. Na szczęście YouTube i Vimeo zapewniają super szybki i w 100% darmowy hosting wideo i tak. Dlatego właśnie najlepiej jest osadzać filmy z YouTube, nawet jeśli są one twoje własne.

Nic zbyt skomplikowanego, ale często widzę ludzi popełniających te błędy i utrudniających sobie życie.

Ale już wkrótce, rzeczy mogą być inne, bardzo inne in-fact!

Gutenberg, The Future of Blogging?

Gutenberg to nowy edytor treści budowany od podstaw przez WordPressa, który już wkrótce pojawi się w instalacji w pobliżu Ciebie.

Czy to przyszłość blogowania? Kto wie? Ale na pewno jest to przyszłość WordPressa, więc nadszedł czas, aby się z nim zapoznać.

Gutenberg to inna bestia.

Jeśli kiedykolwiek używałeś Medium.com do blogowania, to kiedy po raz pierwszy spróbujesz Gutenberga, poczujesz się dziwnie podobnie.

W mojej opinii jest to dobra rzecz, edytor treści Medium bez rozpraszania uwagi jest piękny i łatwy w użyciu, a widząc WP zwróć na to uwagę, jest pozytywny dla wszystkich zaangażowanych w prowadzenie blogów i stron internetowych działających na WP.

Edytor Gutenberg jest również modułowy i pozwala na przeciąganie i upuszczanie bloków do treści, z których każdy ma inny cel.

Jest to podobne do tego, jak wtyczki page builder i niektóre motywy obecnie zapewniają tego rodzaju rozwiązanie typu „przeciągnij i upuść”, ale teraz te funkcje przychodzą do WordPressa domyślnie.

Jeśli jest jeden aspekt WordPressa, który nie ewoluował zbytnio przez lata, to jest to edytor TinyMCE, więc witam tę innowację z otwartymi ramionami.

Jeśli zmagasz się z formatowaniem postów na blogu za pomocą obecnego edytora, możesz już spróbować Gutenberga, pobierając i instalując go, przechodząc do wtyczek w pulpicie nawigacyjnym i wyszukując „Gutenberg”.

Formatowanie postów na blogu &Podstawowy HTML Final Word

Jeśli poświęcisz trochę czasu na praktykowanie powyższego, zyskasz znacznie większą kontrolę nad swoją treścią i sposobem jej prezentacji.

Mam nadzieję, że czujesz się teraz nieco bardziej komfortowo z formatowaniem postów na blogu i podstawowym użyciem HTML.

Te umiejętności mogą zaoszczędzić ci dużo czasu, pieniędzy i drapania się po głowie, gdy formatowanie treści idzie źle lub nie renderuje się poprawnie.

Powyższe podstawy są wystarczające dla większości blogerów i właścicieli witryn WordPress, jeśli jesteś ciekawy, aby dowiedzieć się więcej, istnieje kilka wspaniałych darmowych stron internetowych, na których możesz nauczyć się HTML, w tym CodeAcademy i w3Schools.

Teraz idź i spraw, aby Twoja treść była ładna! 🙂

Jeśli uznałeś ten artykuł za przydatny, rozważ sprawdzenie niektórych z naszych innych przydatnych przewodników po blogowaniu, takich jak nasza Lista kontrolna postów na blogu: Essentials Guide lub How to Repurpose Content, a jeśli jesteś fanem tego rodzaju przewodników, zapisz się na mój newsletter, a podzielę się z Tobą moimi najlepszymi treściami i odkryciami za pośrednictwem poczty elektronicznej.

.