Вметнување код на страницата. Каде да го залепите овој код во WordPress? Структура на датотеката со општа тема

Здраво, драги читатели!

Ајде да зборуваме за програмскиот код на страницата. Честопати, веб-администраторот треба да вметне код на една или неколку страници на веб-локација. WordPress ви овозможува да користите php, java, html, css итн. код на два начина: како извршни команди интерпретирани од моторот на страницата и како текст што може да се чита и копира. Во оваа статија, ќе разгледаме примери за тоа како да вметнете код во страницата на WordPress, така што таа ќе се прикажува правилно и убаво за посетителите.

Код како текст: зошто е потребно?

Потребата за прикажување на програмскиот код во WordPress не е вообичаена. Слободно може да се каже дека сопствениците на медицински, градежни или кулинарски блогови веројатно нема да имаат такво прашање. Истото не може да се каже за авторите на проекти посветени на теми како што се создавање и развој, веб дизајн и програмирање, развој на апликации итн.

Потребата за објавување на поединечни линии на код понекогаш оди подалеку од едноставно додавање на саканиот фрагмент на страницата. Придружната желба да се „направи убаво“ се потпира на употребата на истакнување на синтаксата на кодот и одредени методи на имплементација. Истакнувањето на кодот на веб-локација може значително да ја олесни перцепцијата на податоците од посетителите кои се навикнати да користат напредни уредувачи како .

Ако едноставно го залепите кодот во статија, WordPress ќе го протолкува и ќе го искриви при објавувањето. Затоа, овој тип на податоци мора секогаш да се обработуваат. Овој проблем може да се реши на различни начини: со рачно пишување на потребните ознаки на страницата, со користење на копчето вградено во уредникот на WordPress и со користење на различни приклучоци.

Како да додадете код на статија без приклучок

WordPress му нуди на администраторот на страницата своја алатка, која е дел од системот за управување со содржина, за да го реши овој проблем.

Блок кој се состои од една или неколку линии код додадени во уредувачот на визуелна содржина на WordPress ги заменува сите знаци во ознаките кога се префрла во режим на текст< и >симболи < И >

За да се покаже на CMS дека одреден дел од кодот треба да се прикаже на страницата „како што е“, тој мора да биде означен во текстуалниот уредувач на WordPress и „завиткан“ со ознака користејќи го копчето на лентата со алатки:

Ќе изгледа нешто вака на страницата:










Име 1 Име 2
Вредност 1 Вредност 2

За да вметнете код во страница на WordPress со наведени вовлекувања, кога се движите од уредувач на визуелна содржина во текстуален, можете да ја користите HTML ознаката

Зачувување на сите дополнителни простори што се користат за формирање на вдлабнатини.  Содржина на елементот 
И Стандардно, прелистувачите го прикажуваат во monospace фонт.

Пример за тоа како да вметнете HTML код во страница без приклучоци користејќи ознака во WordPress

Име 1 Име 2
Вредност 1 Вредност 2

Одете на ознака

Применливи се универзални атрибути, особено атрибутот стил, се користи за дефинирање на елемент користејќи CSS.  Примерот подолу покажува како вредностите на атрибутот стилбојата на прикажаниот текст, бојата на позадината на блокот, дебелината, бојата и радиусот на искривување на границата на блокот се поставени:

Можностите за форматирање на блокови прикажани на страница со користење на атрибути се доста широки, но не и неограничени. Употребата на разгледуваните ознаки е оправдана кога на страницата се додаваат единечни линии или мали фрагменти од кодот како примери. Во овој случај, нема потреба да се зборува за прекрасен дизајн, резултатот од вметнувањето ќе биде исклучително минималистички, но за многумина ова е доволно.

Комплексното форматирање кое ви овозможува да имплементирате истакнување на синтаксата е резултат на работата на приклучоците, за кои ќе се дискутира подолу.

Приклучоци за вметнување код за WordPress

Нудиме избор од неколку приклучоци од официјалното складиште на WordPress кои ви овозможуваат убаво да го прикажете секој код (php, java, html, css): линија по линија и со соодветно истакнување на елементите.

SyntaxHighlighter еволуирано

Вообичаен приклучок за вметнување код во WordPress, напреден и моќен, на чија страница за поставки можете да примените една од седумте достапни теми и, доколку е потребно, да изберете прикажување на нумерирање линии и ленти со алатки, да направите URL-адреси што може да се кликнат, да го склопите полето за код. поставете автоматско завиткување на долги линии и сл. Има и визуелен преглед на излезот и опис на користените атрибути.

Во додатокот SyntaxHighlighter еволуираносе што можеби некогаш ќе ви треба е обезбедено. Многу е лесно да се вметне код во напис на WordPress користејќи го за да го направите ова, треба да му дозволите на приклучокот да ја обработи ознаката во поставките

Или користете ги соодветните кратки кодови:

Пример пример пример пример пример

ВП-Синтакса

Уште еден додаток кој долго време заслужено ужива препознатливост меѓу веб-администраторите. Во моментов, статистиката од официјалното складиште покажува повеќе од 10 илјади активни инсталации. За жал, приклучокот не е ажуриран една година, но продолжува правилно да ги извршува своите наведени функции.

ВП-Синтаксанема своја страница за поставки. Овој додаток на WordPress за уредување код, поточно, за негово вметнување и менување на типот на истакнување на синтаксата, ја користи ознаката

Со атрибут за избор на јазик:

пример
пример
пример

Списокот на поддржани јазици е даден на страницата со приклучок.

Атрибут линијаво ознаката се користи за прикажување на нумерирање на линии; Ако кодот содржи HTML објекти, се препорачува да се користи атрибутот избегалсо значење вистинакако опција:

пример

Пример за излез и истакнување на CSS код со помош на приклучокот:

1 2 3 4 5 6 7 8 .block (рабница: 2px #8E0505; боја: #2D0000; /*боја на текст*/ полнење: 2px; /*вовлекување*/текст-порамнување: лево; /*порамнување на текст*/фонт-семејство: ариал;

големина на фонтот: 14 px;

)

Блокирај (рабница: 2 px #8E0505; боја: #2D0000; /*боја на текст*/ пополнување: 2 px; /*полнење*/ порамнување на текст: лево; /*порамнување на текст*/ фонт-семејство: ариал; големина на фонт: 14 px;

Кога се префрла од html уредник во визуелен режим, WordPress ја толкува ознаката

И кодот не се прикажува правилно. Затоа, кога уредувате статии со вметнати кодни блокови, мора да го користите уредувачот на содржина во html режим.

И Код Prettify Лесен приклучок без поставки што ви овозможува да вметнете код на страница на WordPress користејќи автоматско истакнување без да треба да наведете јазик.  Спроведува позадинско осветлување за ознакина страницата.  Едноставно решение базирано на модули

Библиотека на Google Code Prettify

за оние кои не сакаат да истражуваат во спецификите на форматирање на синтаксата на блокови со програмски код прикажан на страницата. ЗаклучокРешенијата засновани на приклучоци дискутирани во оваа статија се само мал дел од она што го нуди складиштето за приклучоци на WordPress. Следејќи ги врските од менито на конзолата „Приклучоци - Додај ново“И до страницата за пребарување, по клучни зборовиИстакнете

И .

Синтакса

Исто така, би сакал да забележам дека информациите во оваа статија ќе бидат корисни за луѓето кои или, како нас, кажуваат како да направат разни додатоци на страницата, или за корисници кои едноставно сакаат да споделуваат корисни информации. И не е важно што оваа информација е код :) Патем, ќе ви кажам мала тајна во овој проект, ние ја прикажуваме со помош на приклучокот Wp-Syntex.

Може да прашате: „Зошто го користиме? Одговорот е едноставен - нема другари по вкус и боја. Шега. Всушност, го избравме овој приклучок затоа што е лесен за употреба, совршено додава визуелен стил на различни видови програмски јазици (css, html, java, javascript, perl, sql, итн.) и не го преоптоварува нашиот сервер .

Па, бидејќи дозволив да се лизне за Wp-Syntex, ајде да го искористиме неговиот пример за да покажеме како да вметнете код во написите на WordPress.

Прво треба да го инсталирате овој приклучок. Разговаравме за тоа како да го направите ова во написот за . Затоа, нема да ја опишам оваа акција овде.

Како резултат, ќе го видите следново:

Кодот што сакате да биде излезен

Исто така, наместо php во овој код, можете да вметнете друг програмски јазик, на пример css или java. Во исто време, стилот на изглед ќе се промени.

Дополнителни карактеристики на Wp-Syntex

Ако го додадете атрибутот на почетната ознака „pre“. линија, односно кодот што ќе треба да го залепите ќе започне вака:

Кодот што сакате да биде излезен

Се надеваме дека ја забележувате разликата?

Постои уште еден мал атрибут што можеби ќе ви треба - ова избегал. Ви овозможува да конвертирате HTML кодови на знаци директно во самите знаци. На пример, го претвора „>“ во „>“. За да може оваа функција да работи, вметнете го следниов атрибут во почетната ознака „pre“:

избегал = "точно"

Според тоа, ознаката ќе започне вака:

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

Најдов и информации на Интернет дека можете да инсталирате друг приклучок (копче WP-Syntax), кој работи заедно со нашиот приклучок и додава копче за вметнување код во уредникот WP. Не бев премногу мрзелив и решив да го тестирам.

Веднаш кога го инсталирав, ме вознемири фактот што не беше ажуриран долго време и не беше тестиран со нашата верзија на WordPress. Па, што да кажам, моите стравови беа оправдани.

Откако го активирав копчето WP-Syntax, решив да се обидам да вметнам java скрипта во една од нашите написи. Направив сè како што е наведено во планината на упатства и препораки. Ја вметнав скриптата во статијата, ја избрав и го притиснав копчето „код“.

Потоа го посочи програмскиот јазик и бројот на линијата од која треба да започне излезот на скриптата.

Можеби се прашувате зошто пишував за овој експеримент во оваа статија? Со ова сакав да кажам дека кога барате некои информации на Интернет, обрнете внимание на датумот на објавување. На крајот на краиштата, постои многу голема веројатност дека информациите во старата статија биле релевантни пред неколку години, но во моментот едноставно не функционираат, а неговата употреба или имплементација може да доведе до ранливост на вашиот проект.

На нашиот блог, се трудам да го одржувам целиот материјал ажуриран, постојано да ги следам ажурирањата и, доколку е потребно, да правам прилагодувања на веќе напишаните написи.

Ако сакате да добивате ажурирани информации преку е-пошта, ви го препорачувам.

Видео „Како да вметнете HTML код во статија“

Пријатели, ако некој претпочита да види како се прави ова, тогаш снимив видео за вас. И ве потсетувам дека имаме и канал на YouTube, на кој исто така можете да се претплатите.

Поврзани написи:

Па, се надевам дека статијата не беше комплицирана и можев детално да ви кажам како можете да вметнете html код во веб-страница без непотребни проблеми.

Не ја занемарувајте естетиката на вашиот блог. На крајот на краиштата, нашиот читател, како и во животот, те сретнува по облеката и те испраќа по памет.

Тоа е се за мене!

Збогум!

Со почит, Калмиков Антон

Здраво на сите читатели и претплатници! оние кои не успеаја да станат - ве молам бидете први што ќе научите од мене за новите објави на страницата на Видео блог

Така, пред некој ден наидов на проблем, не можев да го вметнам html кодот на страницата, барав Google, Yandex, па дури и пребарување по пошта, но не можев да најдам конкретен одговор на моето прашање како да го направам тоа вака.

многу е лесно да се направи ова, само треба да ја користите ознаката textarea + да користите дополнителни параметри за висина, ширина и полнење

Ајде да ги разложиме по ред како и што. На Wordprese, можете едноставно да го ставите потребниот код во визуелниот уредник и ќе се прикаже нешто вака:

»alt=»Систем за автоматско заработување пари»/>

Но, како што можете да видите, кодот не се прикажува убаво и копирањето не е многу погодно. Значи, за спроведување на такви задачи треба да ја користите ознаката:

.

Исто така, запомнете дека оваа ознака мора да биде вметната во уредувач на текст не само на моторот на WordPress, туку и на кој било мотор.

Неопходно е да се земат предвид и да се користат дополнителни ознаки кои додаваат параметри за вовлекување од горната линија стил=маргина: 2px; Исто така, параметарот за висина: висина: 40 px; и секако параметарот ширина: ширина: 660 px;

Сега ќе сумирам писмено. При отворање на кодот

И, конечно, како што ветив, прикачувам лист за измамници:

Како да вметнете Html код на страницата Html?
—————————————

Копирајте ја ознаката во бележник и помеѓу вметнете го кодот подолу, заменувајќи ја врската до вашата страница и врската до вашиот банер

Фусноти:
* — ознака што ви овозможува да вметнете која било ознака Html во која било веб-страница
*стил— параметар одговорен за стилот, големината, бојата на текстот во ознаката
* маргина: 5 px;- параметар за вовлекување
* ширина: 660 px;— параметар на ширина
* висина: 80 px;— параметар за висина

Тоа е сè, драги пријатели, претплатете се на RSS feed и исто така на мојот канал на YouTube
Добро расположение за сите. 🙂

За авторот

Многу луѓе веројатно не разбираат зошто го именував мојот блог Социјален лифт од темнина до сонце, потоа ќе ви ја кажам приказната и ќе ви објаснам. За мене, Интернетот е лифт во кој се фрлам до нивото на вештини, вештини и заработка што ми се потребни; но социјално, затоа што е за луѓето, за општеството, за оние кои го сакаат, за оние кои се многу слични на мојата визија. Темнина- ова е газ, или со други зборови, дното на обичниот живот во кој бев, во кој сега многумина, да, веројатно половина од луѓето кај нас се во овој задник, кои мислат дека ова е галеб, но не... Сонцето- тоа е она што му дава живот на апсолутно секое живо суштество на планетата, вклучително и тебе и мене. Да немаше сонце, немаше да има живот. Сонцето- ова е енергија за живот. И ако резимираме сè, Интернет ЛИФТ- ова е можност за обичните корисници на Интернет кои работат за нивниот вујко, се во финансиски проблеми, сонуваат да се збогатат, но не знаат од каде да почнат. Интернет лифте платформа која ќе им помогне на оние кои сакаат да станат малку или значително тактни во сложеноста и шемите на заработка. Тие ќе можат да откријат од каде да почнат, каде да одат и како да станат свој шеф. Се надевам дека моите совети и написи ќе ви помогнат и вам и на мене. Затоа што еден ден ќе разбереш зошто блогирам, ако знаеш нешто, вредно е само ако се сеќаваш на тоа. И кога снимате и споделувате, тоа ќе биде засекогаш, вклучително и во вашата меморија!!!

Сакате да знаете како најлесниот начин да залепите код на вашата страница на WordPress за да можете да го копирате директно од статијата?

Сакав да го сфатам ова.

Кога ја извршувате вашата веб-страница на WordPress CMS (мотор), мора постојано да ја подобрувате и да додавате нови и корисни функции кои се наоѓаат на други слични блогови.

Не можете да заостанете!

За да го направите ова, понекогаш треба да вметнете дополнителен код таму. Конкретно објавив детална статија на мојата веб-страница каде што зборувам за сите промени што ги направив на мојата тема (шаблон) на WordPress за да не се изгубат. На крајот на краиштата, ако шаблонот се смени, овие прилагодувања ќе треба повторно да се направат.

Покрај тоа, имам специјален што е инсталиран на мојот блог. Патем, таму можете да најдете линкови до статии кои опишуваат за што се овие приклучоци и како најдобро да ги инсталирате и конфигурирате.

Среќен сум да споделам корисни информации што ги научив. И се трудам да презентирам сè на едноставен и разбирлив јазик за да биде достапно дури и за почетници.

Но, понекогаш морам да додадам илустрации кои покажуваат како го сменив кодот на мојата страница.

Досега користев само еден метод за ова: вметнување фотографија од екранот на мојот компјутер.

Но, можете јасно да го видите кодот на сликата, но не можете да го копирате. Во овој случај, мора да се внесе рачно. Тоа значи дека се можни грешки и недоразбирања.

Затоа, за да им ја олеснам задачата на моите читатели, решив да откријам како да го залепам кодот на веб-страница на WordPress, така што секој може лесно да го копира.

Многу луѓе се однесуваат на приклучоците:
WP Syntax во врска со WP Syntax копче;
SyntaxHighlighter еволуирано;
Auto Syntax Highlighter.

Најдов опис како да го вметнете кодот без додаток. За да го направите ова, користевме ознака xmp (отворање и затворање). Но, сега таа е застарена и се препорачува наместо тоа да се користи пред-ознаката (отворање и затворање) во HTML.

Но, не можев да го вметнам програмскиот код во статијата користејќи само специјални пред или xmp ознаки. Се обидов и да ги ставам во контејнер за див. И ја ископирав целосната фраза од сајтовите што ја препорачаа.

Експериментот не успеа. Кодот не беше зачуван при уредување во HTML режим. При префрлување јазичиња (визуелен/текст), тој едноставно исчезна од текстот на статијата. Поради некоја причина ова не функционира. Кој знае, пишете.

Наидов на информација дека тоа може да се направи само по инсталирање на приклучокот WP Syntax. Оние. Сè уште не можете да го направите без приклучок. Ја инсталирав најновата верзија на WordPress (во тоа време - 4.3.1).

Но, можете да го направите на овој начин. Го видовме внесениот код на некоја локација, кликнавме со десното копче на неа за да изберете „view element code“ од контекстното мени и го прегледавме кодот. На овој начин можете да дознаете како е вметната.

Така, утврдив дека на една од локациите што ги познавам, кодот е вметнат со помош на приклучокот Crayon Syntax Highlighter.

Го најдов овој приклучок со пребарување во административниот панел и инсталирање на блогот за обука.

Се покажа дека е многу лесен за употреба. Не сменив никакви поставки, иако има доста од нив. Оставив сè стандардно (како што е конфигурирано од самиот автор).

По инсталирањето и активирањето на приклучокот, во режимот за уредување написи, во менито се појавува посебно копче, со кликнување на кое можете да го залепите кодот на страницата на WordPress.

Се појавува прозорец за вметнување на кодот.

И тогаш секој може да го избере и копира овој дел од кодот за да ги подобри функциите на својот блог.

Излегува дека кодот е многу шарен. Неговите елементи се истакнати во различни бои. Можно е сето ова да го прилагодите за себе.

Сè се покажа толку едноставно што решив да не барам ништо подобро.

И сега, драги читатели, можете лесно да го копирате програмскиот код од мојата страница.

На пример, оваа.

Код на функција за да се скрие најавувањето на администраторот на страницата на WordPress во коментарите

add_filter ("comment_class", "udalit_class_avtora_kommentariya"); функција udalit_class_avtora_kommentariya($klassi)( foreach($klassi as $kluch=>$klass) : if (strstr($klass, "comment-author-")) : unset($klassi[$kluch]); endif; endforeach; врати $classi )

add_filter("класа_коментари" , "udalit_class_avtora_komentariya") ;

функција delete_class_avtora_kommentariya($ класа) (

foreach ($klassi како $kluch = > $klass) :

„Ви кажав како да се регистрирате на веб-страницата на liveinternet и да го добиете html кодот на шалтерот.

За да го вметнеме кодот, ќе го користиме прекрасниот додаток Sourcerer. Овој додаток е наменет за сајтови направени на платформата joomla и се користи за вметнување на какви било кодови, како што се (PHP, HTML, CSS, JavaScript).

Би сакал веднаш да забележам дека бесплатната верзија на овој приклучок е малку намалена во функционалноста. Но, ова на кој било начин не влијае на основните функции. Преземете го додатокот Sourcerer за joomla 3Може

Откако ќе го преземете приклучокот, треба да го инсталирате. Напишав како да инсталирам екстензии на joomla 3. Нема потреба да го конфигурирате, развивачот ги поставил оптималните вредности. Останува само да го вметнете кодот на страниците на страницата.

Како да вметнете код во веб-локација користејќи модул

Прво, треба да отидете на административниот панел на joomla 3. Следно: Екстензии > Управник со модули.

Потоа кликнете на „Креирај Така ќе создадеме нов модул.

Во ставката „Избери тип на модул“, кликнете на врската „HTML код“.

Во креираниот модул, мора да го пополните полето „Наслов“.

Сега копирајте го потребниот код и залепете го помеѓу овие ознаки.

Останува само да се пополнат стандардните полиња на модулот. Каде што означувате: покажете го насловот или не, изберете ја позицијата на модулот и во лентата за статус, ставете „Објавено“.

Конечно, кликнете на копчето „Зачувај“.

Сега, можете да ја отворите страницата и да ја проверите работата на новосоздадениот модул.

Како да вметнете код во статија

Откако ќе го инсталирате додатокот Sourcerer, во уредувачот на материјали, напишете ги ознаките (извор) (/извор) и вметнете ја потребната шифра меѓу нив. Како што можете да видите, сè е исто како во модулот.

Тоа е сè, ако некој има какви било прашања, прашајте го во коментарите. Повторувам, слично, можете да вградите на веб-страница на џумла 3 ( PHP, CSS, JavaScript) кодови.