Как да напишете персонализиран код във вашите WordPress постове

Има много причини, поради които бихте искали да напишете или да включите допълнителен код в публикациите си в WordPress. Може да се наложи да покажете реклама, да приложите уникален стил в определени секции на уебсайта си или просто да маркирате текст или съдържание, за да привлечете вниманието. Все пак можете да добавите код, за да постигнете различни визуални ефекти, за да предложите по-добро потребителско изживяване.


Всички тези и други са валидни причини, но независимо от това, което търсите да постигнете с персонализиран код, процесът на писане на код може да бъде опаковане на нерви или направо предизвикателен! В този урок ще обхванем следните области:

  • Добавяне на код, който изглежда като код, но не се държи като код (в случай, че искате да покажете редове от код или да подобрите външния вид на уебсайта си)
  • Добавяне на код, който е предназначен да се държи като код, напр. Сценаризирани реклами като Google Adsense Ads

Под тези две категории ще се задълбочим малко в програмния код като HTML, CSS, Javascript и ще докоснем рекламите и красотата на

контейнер. Сега, без допълнителни фантазии, нека да се заемем с бизнеса и да напишем някакъв код.

Добавяне на код, който изглежда като код, но не се държи като код

Ако искате да покажете код (може би сте уеб дизайнер или разработчик), който вашите потребители могат да копират и поставят, важно е да го направите правилно, защото дори едно прекъсване на ред може да обърка кода, следователно и цялата ви работа. Начинът, по който вашият код ще бъде интерпретиран от WordPress, зависи от това дали използвате редактора на HTML или Visual Post. Въвеждането на вашия код директно във визуалния редактор няма да има ефекта, който искате да създадете, тъй като визуалният редактор счита кода за нормален текст, което означава, че уеб браузърите няма да интерпретират кода ви като „код“, а като обикновен текст.

От друга страна, HTML Post Editor ще разпознае всички HTML или CSS маркировки, които използвате, което означава, че те ще бъдат интерпретирани от уеб браузъра, нещо, което може да доведе до объркани оформления и забавно изглеждащо съдържание. Например, 

във визуалния редактор ще бъде интерпретиран като обикновен текст и резултатът ще бъде справедлив
. въпреки това,
 в HTML редактора ще се интерпретира като HTML маркиране и резултатът ще бъде създаването на контейнер.

HTML упражнение

Това е упражнение в безполезността наистина, но можете да опитате за по-ясна картина на това, което искам да кажа. Просто отворете своето HTML редактор, Тип

и го запишете като чернова. След като черновата ви е запазена, щракнете върху „Преглед на публикацията“, за да я видите уреден уебсайт. Не се притеснявайте, той не е постоянен и можете просто да изхвърлите черновата. Сега се върнете към бизнеса.

Като цяло можете да използвате код по два начина. Първо, можете да използвате код в ред (или абзац), за да изясните точка за вашия код. Второ, можете да напишете, маркирате и поставите кода си в такъв блок:



Код за писане в урока за публикации в WordPress


...

За да постигнем горния ефект, използваме написания код като ... кодът ни влиза тук . Замести стрелки (<  >) С квадратни скоби ([]) в зависимост от вашия WordPress сайт и редактора на публикации, който използвате (визуален или HTML). Кодът, който искате да покажете, трябва да премине между отварящия маркер,   и затварящия маркер, . Например, за да използвате код в абзац:

Код в параграф

Кодният маркер прави не-HTML текста да изглежда като код, но не казва на уеб браузъра да интерпретира HTML маркирането или да го премахне от публикацията. Това означава, че браузърът все още може да кодира вашата HTML маркировка, което затруднява показването HTML маркери във вашия код. Можете обаче да преодолеете този проблем, като използвате разширени знаци или символни образувания, за да представите < > символи, които ще заблудят всеки браузър. Например…

HTML таговете могат да бъдат интерпретирани като HTML маркиране

… Ще създаде нов контейнер (благодарение на

) и заглавие (

), което ще обърка вашата уеб страница. Но ако използвате субекти символи за замяна на < > стрелки, вие ще избегнете това поведение и ще изведете кода си по желание. Следователно горният код ще изглежда така:

Вместо това използвайте символни единици

Създайте маркиран код на код

Ако искам да подчертая блок код (или дори текст), за да получа нещо като;

Блок код

Започвам с поставянето на кода (или текста) в контейнер така:

Трябва да направите това в HTML редактора

След това добавям стил, използвайки CSS или директно (както в изображението по-горе), или чрез style.css файл, открит в основната папка на вашата тема.

Оформете кодовете си

Кодният маркер ще използва размера на шрифта от и поставете текста с моноразмерен шрифт по подразбиране. Можете да промените всичко това, за да имате своя код да изглежда точно както искате. Всичко, което трябва да добавите …

 код {шрифта: 1.2em; цвят: # 000; шрифт тегло: нормално;} 

… или нещо подобно на вашето style.css. Има неограничени стилове и всичко зависи от вашите лични предпочитания, така че не се въздържайте от стил.

Добавяне на код, който се държи като код

Този раздел е особено полезен, ако искате да показвате реклами или други скриптове, напр. Javascript фрагменти във вашите публикации. Докато има плъгини, като например Бърз Adsense, които ще ви помогнат да управлявате реклами в публикациите си, може да ви е интересно да инсталирате самостоятелни скриптове, над които имате пълен контрол над.

Ако вашата реклама е обикновено изображение и връзка, можете да добавите рекламата в публикацията си чрез помощната програма за качване. Просто качете изображението и въведете вашата връзка (и може би надпис) и вашата работа е свършена. Този метод е ограничен, тъй като можете да подравните рекламата си само отляво, отдясно или в центъра – точно като типично изображение. Освен това можете да създадете контейнер в публикацията си с помощта на HTML редактора.

Пример:


Създайте този контейнер точно там, където искате вашата реклама, което означава, че трябва да сте готови публикацията, преди да добавите рекламата. След като контейнерът е готов, можете да го оформите, колкото искате. Можете да го преместите, използвайки style.css, като използвате позиция Имот. Ако искате да стартирате a Реклама в Google Adsense в рамките на вашите публикации, все още можете да използвате Бърз Adsense – приставката – или създайте контейнер и поставете рекламния си код така:


Бележка 1: Рекламите в Google са базирани на Javascript и могат да бъдат интерпретирани от всички основни уеб браузъри, при условие че потребителят е активирал Javascript на своите машини.

Бележка 2: Трябва да изберете правилните размери на рекламите за вашия уебсайт, за да не объркате вашите публикации, както и уебсайт.

Ако искате да добавите постоянна реклама, която ще се показва във всичките ви публикации (настоящи и бъдещи публикации) без допълнителна работа, ще трябва да редактирате Шаблон за единична публикация (Single.php). Поставих реклама 468px от 60px в горната част на всичките си публикации, като добавих следния код към single.php веднага след < – – END post-entry-meta – ->.


Разбира се, трябва да използвате собствените си реклами в Google �� Ето как рекламата на Google Adsense се появява в моя блог:

Код за писане в WordPress

Да намеря single.php, отидете при вашия Панел за администриране – >> Външен вид – >> Редактор – >> single.php. След отваряне на Single.php, използвайте лентата за търсене (Ctrl + F) за намиране < – – END post-entry-meta – ->.

Можете да оставите контейнера такъв, какъвто е или да го оформите като използвате style.css, както сметнете за подходящо. И не забравяйте да запазите всички промени. Най-

контейнерът е наистина полезен и когато го свържете с CSS и унция креативност, можете да постигнете толкова много с вашия WordPress сайт. Може да ви помогне да поставите всеки код (или нещо наистина) навсякъде на вашия уебсайт.

Кутията с инструменти

Ако искате да научите повече за писането на персонализиран код в публикациите си в WordPress, моля, не се колебайте да разгледате следните ресурси:

Е, това е така. Успяхме да обхванем районите, които очертахме в началото. Но ако не разбирате каквато и да е концепция в тази публикация или искате да добавите вашите предложения или мнения, моля, споделете мислите си в секцията за коментари по-долу!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map