Къде да поставите този код в WordPress? Обща файлова структура на темата.

25.01.2022

и ще трябва да поставите кода.

И така, какво правим? Щракваме върху иконата с лупа и започваме да инспектираме областта, в която се намира нашата статия. Необходимо е да се намери такава част от страницата, когато областта на цялата статия е маркирана. Това ще бъде блокът, който показва съдържанието.

Като пример, създадох нова статия с малко съдържание, за да покажа как ще бъде маркиран даден блок.

Чрез щракване трябва да намерите и блока, който съдържа вашето съдържание. При задържане на мишката виждате малка подсказка, показваща името на дадения блок.

Когато намерите такава част от шаблона, щракнете върху бутона на мишката и тази частстава активен. В панела за изглед на кода на елемента редът от код с този блок ще бъде автоматично маркиран.

Както можете да видите, този блок има точно същото име като в подсказката за курсора.

Когато знаем името на блока, в който се показва основната част от статията, можем да отидем до необходимия файл и да вмъкнем необходимия код след този блок. Нека вземем за пример изходния файл на записа (single.php).

Отварям го в редактора на Notepad и търся ред в кода, който започва точно както в панела за изглед на кода на елемента.

Много е удобно да работите в редактора на Notepad, защото когато щракнете върху отварящия таг на блока, се избира и затварящият таг (показан на изображението по-горе). Затварящият таг показва, че това е краят на изхода на съдържанието. Именно след него можем да вмъкнем нашите социални бутони, свързани публикации и други функции.

Току-що вмъкнах социалните бутони там заедно с формата за абонамент за актуализации.

Те се показват на страниците.

По подобен начин се извършва вмъкване в други шаблонни файлове (страници, заглавия, архиви...).

Без практика е малко вероятно този метод на вмъкване да бъде овладян от текст и изображения. Затова вземете и опитайте. Сигурен съм, че всичко ще се нареди. Също така в помощ на видеото в началото на статията.

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

Остана последният момент, което си струва да осветим в този параграф.

Има доста настройки, които изискват намеса във файла functions.php на шаблона. Но също така трябва да разберете как да вмъквате кодове в него.

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

Но какво ще стане, ако този етикет не е във файла? Аз например просто го нямам. Как да бъдем в такава ситуация? Липсата на затварящ таг не означава, че файлът е невалиден. Блогът работи. Така че всичко е наред.

В този случай предлагам да направите обратното - да го поставите в кода в самото начало на файла преди отварящия таг. Вижте изображението по-долу.

Отварящият етикет е маркиран в червено, а вмъкнатият код е маркиран в синьо.

Това е един вариант. Можете също така да вмъкнете код в края на файла, но преди последния код. В този случай трябва да разберете поне малко къде започва последният код, за да не го отрежете.

Това е всичко. Ако внезапно имате същата ситуация с липсата на затварящ таг във файла funstions.php, тогава ще знаете как да продължите.

Дефиниране на визуални стилове в шаблон

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

Когато намерим необходимия елемент и щракнем върху него, стиловете за избрания блок (елемент) се показват в дясната област на панела за изглед на кода. Ще покажа стиловете за същия блок от статията, обсъдена по-горе.

Ако искаме да редактираме тези стилове в реално време и да видим как ще изглежда този или онзи елемент, можем да ги променим направо в този панел. Просто щракнете върху стойностите на желаните стилове и ги променете.

Но промените ще бъдат валидни само до първото опресняване на страницата. За да приложите тези стилове, трябва да ги добавите към стиловия файл на шаблона. В едно от изображенията по-горе показах със синя рамка област, която показва името на файла, където са написани тези стилове, както и точния ред, на който започват.

Затова отваряме файла style.css и търсим ред 890 в моя случай.

Тук можете да ги редактирате. Запазете файла и го качете на хостинг.

Отбелязвам, че редактирам всички файлове на моя компютър. В този случай използвам външни програми, което дава възможност да се отменят всички промени, ако възникнат задръствания. Същото важи и за различни експерименти с кодове и скриптове - всичко е включено.

Горещо препоръчвам да извършите подобно редактиране на всички файлове на вашия компютър. За да направите това, първо трябва да изтеглите файловете на вашия компютър от вашия хостинг с помощта на ftp клиент. Писах за това в. И след това просто отворете файловете с всеки удобен за вас редактор, който може да ги отвори. Използвам Notepad за тази цел.

Тази статия приключи. Ето такъв труден процес за определяне на мястото, където трябва да вмъкнете някакъв код или скрипт. На пръв поглед тази процедура може да изглежда сложна. Но всичко е много просто. Опитайте няколко пъти и няма да задавате такива въпроси.

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

Всички приятели. Завършвам с това. Очаквам вашите въпроси в коментарите. Ще разберем всичко. Ще се видим в ново съдържание.

С уважение, Константин Хмелев.

Разбира се, не всеки се нуждае от тази информация, а само тези, които на своите страници споделят с читателите най-добрите си практики при избора на кода (прочетете вътрешностите на сайта) и някои от неговите надстройки чрез ... е, вие разбирате Чрез намеса в "генетиката"! Какво си помисли?

Гледайки напред, докато започна основната история, мога да ви кажа, че ще продължа да се занимавам с това, за което ще пиша и което, много вероятно, може да ви бъде полезно, ако имате и свой собствен ресурс за творчество с клавиатура в мрежата . И затова ви препоръчвам да следите пускането на нови статии, за да не пропуснете пускането на първокурсник. Особено ако все още не сте го направили, чудя се защо?

И сега, мили мои красиви, започва - историята.

Може да възникне разумен въпрос, но трябва ли заемът като цяло да се занимава с въвеждането на кода? Защо трябва да правите някакъв вид подчертаване на код и защо не можете просто да го поставите, като текст, например?

И всичко е просто - ако се опитате да вмъкнете кода просто така, тогава вместо да го покаже, той понякога ще започне да се изпълнява и ще изпълнява всички функции, за които е предназначен, освен това точно там, където го вмъкнете. От всички тези "прелести" сайтът може да "плува", може да се "усуква", а самата статия се превръща в нещо неразбираемо и нещо по средата - грозно! Да, и самият код в неговата „гола“ форма, не много четим „спектакъл“, който за неподготвен поглед може да представлява несмилаема субстанция, от която зрителят може дори да развие нежелание да разбере нищо и да се задълбочи в същността на случващото се. Накратко, не е! Да, можете да се убедите сами, ако погледнете например изображението в кода:

За да стане „това“, има няколко варианта и по-точно 3. Ще се опитам да опиша всичко, както обещах в началото, а вие сами преценете кой ще ви бъде по-удобен и приятен за изпълнение и възприемане.

Как красиво и правилно да вмъкнете html код в тялото на статия.

Вариант №1 - осветяване на кода чрез плъгина WP-Syntax.

По-точно тази опция е реализирана чрез куп от два плъгина - за по-лесно използване. Първата част на пакета се нарича: WP-Syntax и изпълнява основната функция. А втората част е сервизна и се нарича WP-Syntax Button, която реализира работата чрез натискане на бутон, който точно този бутон ви добавя на таблото на wordpress редактора. Изтеглете двете части на този пакет или чрез търсене в административния панел на блога по име, или от страниците на хранилището на двигателя. Страницата на хранилището за WP-Syntax е тук. И страницата за WP-Syntax Button. Не сме в автобуса, нали?

Инсталацията е стандартна - намерена, изтеглена, активирана. Моля, обърнете внимание, че плъгинът Button не е актуализиран повече от две години и няма данни за неговата съвместимост с вашия нова версия WordPress, който може да ви предупреди. Ако сте загрижени за това обстоятелство, тогава не можете да изтеглите бутона и да преминете само с първата част от пакета - това също ще работи, само че по-малко удобно. От себе си мога да кажа, че използвам пълния комплект и всичко работи.

Ако инсталирате всичко, тогава ще имате нов бутон "Код" на панела за редактор.

За да вмъкнете код през този плъгин, първо трябва да го поставите във визуален (нормален, където пишете) режим, да го изберете с мишката и след това да щракнете върху бутона „Код“ и да изберете езика, който отговаря на вашия код от падащото меню списък. В същото време можете да зададете номерирането на редовете, като посочите номера на първия в Номер на ред. След като изберете, натиснете Insert.

В същото време, след като запазите / актуализирате публикацията / страницата, ще видите нещо като тази снимка с вашия красиво вмъкнат код на картинка, например:

Ако не сте инсталирали частта WP-Syntax Button, тогава ще трябва да използвате тази комбинация от код, за да вмъкнете кода:

Въведете своя код тук

Където езикът е езикът на вашия код. Тази комбинация трябва да бъде вмъкната в HTML редактора и да въведете вашия код вътре. Списъкът с поддържаните езици е на тази страница с плъгини. Опцията за вмъкване на код по този начин не е много удобна, но може да се наложи на някой. Резултатът ще бъде нещо подобно:

1	Въведете своя код тук

Вариант #2 - Маркиране на синтаксис чрез SyntaxHighlighter Evolved Plugin, чието име е точно това, което се превежда. Можете да го изтеглите, като потърсите името в административния панел на блога или от тази страница на плъгина. Монтажът е стандартен. Този плъгин работи като предишния, но по по-малко удобен начин.

След инсталирането ще имате елемент от менюто Settings> SyntaxHighlighter, където ще бъдат всички негови настройки. Да, забравих да кажа, че плъгинът е на английски и не е на руски - недостатък. Ако нещо не е ясно, използвайте превода на страницата.

Настройките на приставките могат да бъдат оставени по подразбиране - те са функционални. Или можете да зададете стойностите, както е на снимката с пример за моите настройки:

Ако се объркате, тогава в настройките има бутон за рестартиранедо Defaults - нулиране на настройките до оригиналните. И също така в долната част на страницата, под бутоните, има визуализация на дисплея на кода - можете спокойно да играете и да изберете своя собствена версия на настройките и изхода на кода. Има списък с поддържани езици и други Подробно описаниенастройките му - всичко е на руски, ще се разберете.

За да вмъкнете html или php кодв записа на сайта с този плъгин трябва да приложите една от конструкциите от примера в страницата с настройки на плъгина (най-отдолу):

Когато пишете публикация, превключете към HTML редактора, изберете желан параметърезик от примера, поставете го и поставете кода си вътре. Ще се получи нещо подобно:

Тук въвеждате своя дълъг код

Вариант номер 3 - вмъкнете html или php код без плъгин.

За да направите без плъгина и да вмъкнете html кода в тялото на блога, трябва да го поставите в следния код:

ВЪВЕДЕТЕ ВАШИЯ КОД ТУК

Където височината и ширината са съответно височината и ширината на изходното поле с кода в пиксели, цветът е цветът. Можете да изберете цвета с пипетата, за която вече писах. Ширината и височината могат да се регулират според параметрите на вашия сайт. Резултатът ще бъде нещо подобно:

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

Сега мисля да реша как да вмъкна красиво html код в блог.

Тук ще завърша моята беседа. Надявам се, че направих нещо добро за вас днес. Благодаря ви, че ме прочетохте.

Малко положително:

Щракването върху социалните бутони и коментарите са добре дошли!

Следвайте бутоните, кажете на приятелите си за статията - това е за парите!

Освен това искам веднага да уточня, че ще вмъкнем кода в самата статия, така че нашите читатели да могат да го копират, без да губят време за писане на самия текст. По този начин ще увеличим удобството () на нашия ресурс - този път. Да, и статиите ще изглеждат по-професионални и завършени - това са две.

Бих искал също да отбележа, че информацията в тази статия ще бъде полезна за хора, които или, както ви казваме, как да правят различни видове добавки на сайта, или потребители, които просто обичат да споделят полезна информация. И няма значение, че тази информация е код 🙂 Между другото, ще разкрия една малка тайна, на този проектние го извеждаме с помощта на приставката Wp-Syntex.

Питате: "Защо го използваме?" Отговорът е прост - няма другари за вкус и цвят. шега. Всъщност избрахме този плъгин, защото е лесен за използване, идеално добавя визуален стил към различни езици за програмиране (css, html, java, javascript, perl, sql и т.н.) и не натоварва нашия сървър.

Е, тъй като се изпуснах за Wp-Syntex, нека го използваме като пример, за да покажем как да вмъкнете код в статии на WordPress.

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

В резултат на това ще имате следния резултат:

Кодът, който искате да бъде показан

Освен това вместо php в този код можете да вмъкнете друг език за програмиране, като css или java. В същото време стайлингът външен видще се промени.

Допълнителни функции на Wp-Syntex

Ако добавите атрибута към отварящия таг "pre". линия, тоест кодът, който ще трябва да поставите, ще започва така:

Кодът, който искате да бъде показан

Надявам се да забележите разликата.

Има още един малък атрибут, от който може да се нуждаете - това е избягал. Позволява ви да конвертирате html кодове на знаци директно в самите знаци. Например ">" ще се преобразува в ">". За да работи тази функция, вмъкнете следния атрибут в отварящия таг "pre":

escaped="true"

Съответно етикетът ще започне така:

< pre lang= "php" line= "1" escaped= "true" >

Също така в интернет намерих информация, че можете да инсталирате друг плъгин (WP-Syntax Button), който работи във връзка с нашия плъгин и добавя бутон за вмъкване на код към WP редактора. Не ме мързеше и реших да го тествам.

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

След като активирах бутона WP-Syntax, реших в една от нашите статии да опитам да вмъкна java скрипт. Направих всичко, както беше посочено в планината от инструкции и препоръки. Поставете скрипта в статията, маркирайте го и натиснете бутона "код".

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

Може да попитате защо писах за този експеримент в тази статия? С това исках да кажа, че когато търсите информация в интернет, обърнете внимание на датата на публикуване. В крайна сметка има много голяма вероятност информацията в старата статия да е била актуална преди няколко години и нататък този моментпросто не работи и използването или внедряването му може да изложи проекта ви на уязвимост.

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

Ако желаете да получавате актуална информация за електронна пощатогава го препоръчвам.

Видео "Как да вмъкнете HTML код в статия"

Приятели, ако някой предпочита да види как се прави това, тогава записах видео за вас. И ви напомням, че имаме и канал в youtube, за който също можете да се абонирате.

Свързани статии:

Е, надявам се, че статията не се оказа трудна и успях да ви разкажа подробно как можете да вмъкнете html код в сайта без ненужни проблеми.

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

Това е всичко за мен!

Чао чао!

С най-добри пожелания, Антон Калмиков

Здравейте на всички читатели и абонати! тези, които не са имали време да станат такива - моля, за да научите първи от мен за нови публикации на сайта на видео блога

И така, онзи ден се сблъсках с проблем, не можах да вмъкна html код на страницата, търсих в Google, Yandex и дори търсене в пощата, но не намерих конкретен отговор на въпроса си как да го направя като този.

много е лесно да направите това, просто трябва да използвате тага textarea + use Допълнителни опциивисочина, ширина и подложка

Да наредим как и какво. В wordprese можете просто да поставите необходимия код във визуалния редактор и той ще се покаже така:

»alt="Автоматизирана система за правене на пари"/>

Но както можете да видите, кодът не се показва красиво и не е много удобно да го копирате. Така че, за да изпълните такива задачи, трябва да използвате етикета:

</b>между които да въведете своя код или текст <b> .

Също така не забравяйте, че този етикет трябва да бъде вмъкнат в текстов редакторне само на wordpress двигателя, но на всеки двигател.

Необходимо е да се вземат предвид и да се използват допълнителни тагове, които добавят параметри за отстъп от горния ред стил=поле: 2px; Също параметърът за височина: височина: 40px; и разбира се параметърът за ширина: ширина: 660px

Сега ще обобщя написаното от мен. При отваряне на кода </b>трябва да вмъкнете параметрите за ширина и височина на отстъпа, изглежда така: <b><i><textarea style=»margin: 2px; width: 660px; height: 40px;»> </i> </b>задайте необходимите параметри в пиксели и вашият код е почти готов, след това напишете текст или код и след това затворете маркера <i><b>

И накрая, както обещах, прикачвам Cheat Sheet:

Как да вмъкна html код в html страница?
—————————————

Копирайте етикета в бележника и между тях поставете кода по-долу, като същевременно замените връзката към вашия сайт и връзката към вашия банер

</b></p> <p><a href=»http://ваш_сайт.ru»><img src='/samsung-galaxy-s5/kuda-vstavlyat-etot-kod-v-wordpress-obshchaya-struktura-failov/' loading=lazy loading=lazy>»alt="въведете текста, който се показва, когато задържите курсора на мишката над банера"/></a></p> <p><b>

Бележки под линия:
* - таг, който ви позволява да вградите всеки Html таг на всяка уеб страница
*стил- параметър, отговарящ за стила, размера, цвета на текста в тага
* поле: 5px- параметър за отстъп
* ширина: 660px- параметър за ширина
* височина: 80px;- параметър на височината

Това е всичко, скъпи приятели, абонирайте се за RSS емисията, а също и за моят канал в youtube
Добро настроение на всички. 🙂

за автора

Мнозина вероятно не разбират защо кръстих блога си Социално издигане от тъмнината към слънцетоТогава ще разкажа и обясня. За мен Интернет е асансьор, в който се потапям до нивото на умения, умения и приходи, от които се нуждая; но социален, защото е за хората, за обществото, за тези, които желаят, за тези, които много приличат на моята визия. Тъмно- това е задник, или с други думи дъното на един обикновен живот, в който съм бил, в който много сега, да, може би половината от хората у нас са в този задник, които смятат, че това е чайка, но не ... слънце- това дава живот на абсолютно всичко живо на планетата, включително и на нас. Ако нямаше слънце, нямаше да има живот. слънцее енергията за живот. И за да обобщим всичко, InternetLIFTе възможност обикновени потребителиИнтернет, които работят за чичо ми, са във финансови затруднения, аз мечтая да забогатея, но те не знаят откъде да започнат. Интернет асансьоре платформа, която ще помогне на тези, които желаят да станат малко или значително запознати с тънкостите и схемите за печелене. Те ще могат да научат откъде да започнат, накъде да отидат и как сами да си станете шеф. Надявам се, че моите съвети и статии ще помогнат и на вас, и на мен. Тъй като един ден ще разберете защо блогвам, ако знаете нещо, то е ценно само когато го запомните. И когато запишете и споделите, ще бъде завинаги, включително и в паметта ви!!!

Здравейте мили приятели. Днес, продължавайки темата за ускоряване на зареждането на блога, нека поговорим за възможността за замяна на плъгини с "леки" скриптове. Скриптовете, за разлика от плъгините, имат много по-малко натоварване на сървъра и следователно скоростта на зареждане на сайта ще бъде по-висока. Към днешна дата има много плъгини и те са в състояние да решат много задачи на блогъри. Но често тези добавки могат да бъдат заменени от работата на по-бързи скриптове. И понякога дори деактивирайте ненужните добавки. И колкото по-малко добавки на трети страни, толкова по-висока е скоростта на зареждане на сайт или блог.

Ако анализирате скоростта на зареждане на сайта, можете да видите кои от добавките забавят скоростта на зареждане на вашия сайт. Какви услуги да използвам за проверка съм писал. В моя случай най-голямата спирачка е плъгин, който ви позволява да показвате примери програмен кодв статии, с подчертаване на синтаксиса на същия код. Този плъгин се нарича SyntaxHighlighter.

Резултатът от теста дори не се побираше на страницата. Разбира се, подчертаването на кода е много красиво, но ако го погледнете, не става дума за подчертаване. Като цяло ефективността на кода е важна. И ако кодът е просто вмъкнат, тогава вероятността от неговата неработоспособност е висока.

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

Как да въведете код в статия без плъгин

Известно е, че в WordPress, за да се покаже пример за изходния код в статия, е достатъчно да отидете в тестовия редактор, когато пишете статия и да заключите желан кодв тагове

Вашият код

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

Как да промените вида на показвания код

За да направите това е съвсем просто.

Опция 1

Можете да зададете етикет

Клас, например, class="cod" и set желани стиловевъв файла style.css.
.cod (ширина: автоматично; цвят на фона: whitesmoke; рамка: 1px плътен #C7C3C3; радиус на границата: 5px; цвят: #167dec;) 
Вариант 2
Можете също да задавате стилове директно при вмъкване на кода.  Ще изглежда нещо подобно:
 
Вашият код
 
И в първия и втория пример, ако вмъкнатият код излезе от статията, трябва да добавите свойството overflow: auto;  което ще ви позволи да контролирате блоковия елемент.
Тези методи са добри за всички, но бих искал нещо по-просто.  Като цяло, отново мързел - двигателят на прогреса ви кара да измислите нещо, което ще улесни този процес.
Как да добавите бутон „Вмъкване на код“ към лентата за редактиране на WordPress
Прост бутон в панела за редактиране на WordPress ще улесни този процес.  И тя изглежда така.
Ако искате да инсталирате такъв бутон за себе си, тогава ще ви трябват няколко минути от вашето време и няколко файла от мен.  Така че да започваме.