Добавяне на джаджи с HTML и редактиране на публикации

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
Вече имаме базови познания по"html" и искам в моя уеб сайт да сложа един блок с информация, който аз ще създам.
И то е направена директно с "html".
Нека да видим как може да добавим този текст.
Ще отидем и ще сложа една джаджа.
Има една джаджа, която е произволен текст или "html".
Ще я добавя в моето меню.
Най-отдолу и тук ще пиша "новини".
И каквото напиша тук, ще се появи в уеб сайта.
Така нека да го променим.
И ще напишем "важно".
Така създадох един текст.
Ще го запиша.
Но не е много добре форматиран.
Нека да видим как може да го форматираме с нашите познания по "html".
Ще направя удебелени "важно".
Тук има опция за автоматично добавяне на параграфи и това ще ни помогне за този текст да е на отделен ред, но аз искам да го направя в "html".
Направихме и това.
След което ще сложа допълнителна връзка.
До тогава разгледайте предложенията в нашия електронен магазин.
И тук ще напиша "href".
И ще го затворя накрая.
А пътя към електронният магазин е кликвам на него.
Копирам го и го слагам тук.
И понеже не сме го направили като латиница, ще се появи с тези символи.
Записвам.
Разглеждам, нека да се върнем в началото и вече имаме тук и една връзка.
И по аналогичен начин може да добавяме изображения.
Да слагаме връзки, както сложихме тук връзка.
Може да правим най-различни неща.
Ако искаме може да сложим и логото на Здравец.
Нека да го копираме.
Всъщност копиране на "URL" и ще го сложим най-отгоре.
Просто като пример.
Всъщност няма да ползвам "p".
Ще го направя така.
Да видим какво ще се получи, защото то е доста голямо.
В случая добре изглежда и няма да го променям.
Но с параметрите вътре в "html" тага, широчина и височина, аз мога да му задам и точни размери.
Да кажи че ще го махнем и ще го сложим отдолу.
И успяхме да добавим изображение, да стилизираме нашия текст и да добавим връзка.
В повечето случаи това е основното нещо, което ни трябва.
Нека сега да разгледаме самия уеб сайт как е направен.
И ако кликна с десния бутон и избери "view source".
Ще видим кода, който е вътре в самата уеб страница.
В началото изглежда доста плашещо, но всъщност ще видим, че това е реално една подредба по същия начин по който разглеждахме базовия "html".
Аз ще се върна в уеб сайта, когато искаме нещо да модифицираме в темата, често разглеждаме тук как е направено и го модифицираме.
Но вече създаването на собствена тема или модифициране изисква доста "html" и "css" познания.
А целта на този курс е да се справим, да направя един уеб сайт без "html" и без програмиране.
Продължаваме нататък като ще добавяме още така базов "html" и "css" в нашия уебсайт.
Другото място, където ни трябва е в самите публикации.
Нека да избера една публикация и най-добре е да разгледам тази, която видяхме с четирите супер храни.
Ще я редактирам.
И вместо във визуалния редактор, където нещата се визуални.
Ще кликна на текстовия редактор и тук всъщност е много подобно на това, което видяхме и което ние сами създадохме.
Домати са в "h2".
След което имаме параграф, но този "justify", който ние направихме на целия текст.
Тук е направен само на този параграф и на всеки отделен параграф по-надолу е задаван за самия параграф, а не на целия текст като цяло.
Затова го пиша тук.
След което имаме линк към изображението за домати и самото изображение.
Тук са зададени и широчина, височина.
А "alt" е текста, който се появява, когато минем с мишката върху изображението.
И оттук нататъка отново се повтаря същата схема.
Броколи в "h2".
След което брюкселско зеле в "h2" и отделните текстове.
И ако искаме да го модифицираме, вече може.
Да кажем тук да го направим удебелено.
И като се върна визуалният редактор ще видим, че това е удебелено.
Или пък ако го сменим на наклонен.
Ще бъде наклонен.
Или пък може да го махнем изцяло.
Така реално, ако от някъде са ни необходими "html" и "css" познания.
То са като добавяме отделни блокове в самия уеб сайт или пък, ако коригираме нашата публикация.
И възможностите, които са на визуалния редактор не ни стигат искаме да добавим нещо, така по по-нестандартно.
Третия вариант, е когато тук така да го кажем се омажат нещата, влизаме в текстовия редактор и почистваме "html" кода.
Понякога визуалният редактор създава, особено ако сме поставили текст или сме поставили текст от някъде другаде.
От друга уеб страница нещата отиват доста на зле и се вкарва много излишен код, който често искаме да изчистим в текстовия редактор.
Така поставихме основите на нашите "html" и "css" познания.
В следващите уроци вече ще добавяме различни неща.
Като основно ще слагаме "html" код там, където наистина нямаме друг вариант.
Ще се опитаме всичко, което правим да бъде със средствата на "WordPress" и да няма нужда от писане на код ръчно.

Тест за преминаване към следващия урок

 
В текстовия редактор НЕ можем:
Да видим и добавяме HTML и CSS кодовете
Да правим модификации и корекции 
Да добавим нещо нестандаратно, което не се предлага във визуалния редактор
Да почистим HTML кода, който не ни е нужен
Да видим как изглежда страницата ни за потребителите
 
Кога НЕ се налага да използваме HTML и CSS познания в Wordpress?
Ако добавяме отделни блокове в нашия уеб сайт и искаме да си форматираме
Ако възможностите на визуалния редактор не са ни достатъчно и искаме да добавим нещо по-нестрандартно
Ако чрез визуалният редактор нещата не се получават както искаме ("омазали са се") и се налага да прибегнем до текстовия редактор и промяна на кода в него
Ако създаваме публикация или инсталираме разширение

Въпроси и отговори

  • Как?

    Марина Лазарова:

    Как се задава при създаването на връзка посредством HTML  тя да се отваря в нов прозорец?

    Emi Todorova:

    Здравей Марина, 

    Това става, като се добави   target="_blank" 
    Например: Източник: <a href="http:/............." target="_blank"> ...</a>
    Марина Лазарова:

    Благодаря!

  • Как да променим шрифта на цялата тема?

    Андрей Танев:

    От view sourse видях кой е шрифта на темата. С каква програма мога да го променя,защото само през вю сорс не ми дава  да коригирам.

    Благодаря
    Мария Балева:

    Здравей Андрей, ако говорим за темета ColorMag, виждам, че използва font-family: 'Open Sans', но в безплатната тема, каквато използваме няма опция за промяна на шрифта. Ето тук в сравнителната таблица се вижда, че няма включени шрифтове- http://themegrill.com/themes/colormag-pro/, само ако се закупи premium темата. А програма или пък плъгин за промяна на шрифта има, но най-вероятно ще ти послужат да добавиш шрифтове за публикацийте, но не и да смениш шрифта на темата... дано все пак съм била полезна донякъде :)

    Живко Казаков:

    Шрифта може да се промени и когато във файла, който съдържа font-family: 'Open Sans', 'Open Sans' се замени с името на шрифта, който искаме да ползваме. Могат да се изредят и няколко шрифта, разделени със запетая, в случай, че този, който разглежда страницата, на своя компютър няма инсталиран шрифта, който сме ползвали. В такъв случай, с изброените шрифтове предлагаме алтернатива.

    Людмил:

    Ето я програмата!

    Людмил:

    Пътят към папката и реда ти го показва view sourse: Лесно е!

    Людмил:

    Грешка инспектирай елемента и ще откриеш къде точно се намира и на кой ред! Проблем ще е, ако css файла е компресиран.. тогава ще ти го показва на един ред!

    Людмил:

    Пътят винаги представлява това === sitename/folder/file.css

  • Как се променя размер шрифт?

    Катя Сотирова:

    Как се редактира размер на шрифта в темата, при условие, че няма допълнителни CSS класове. В кода навсякъде шрифта е с еднакъв размер, но реално в отделни части и страници има различни размери. Забелязвам, че е зададено оразмеряване с em, което ясно, че е колко пъти размера да е по-голям от текущия. Как да се зададе локално размер на шрифт в пиксели, въпросът ми не е свързан с редакция на темата от уроците.

    Грациела Георгиева:

    Здравей, Ако става въпрос за създаване на съдържание и публикации в някаква тема, то във визулания редактор има възможност да избереш коя част от текста да е заглавие, коя да е параграф. Така ще се промени и размерът на шрифта. Ако обаче искаш да промениш изцяло големината на определени тагове и класове, то отиваш в темата и намираш style.css файла. Там трябва да намериш класа или тага, или комбинацията от класове и тагове, тоест селектора на елемента, който искаш да промениш, след това правиш промяната и готово. :) А всъщност локално ли е инсталиран Wordpress? :) Ако пък не е локално, то можеш да влезеш в админ панела и в раздел Appearance > Themes и Theme Options да оправиш стилизирането. :)

    Били:

    Благодаря! :)

    Jullian Angelov:

    Според обясненото в предният урок влязох във Външен вид --> Редактиране:

    Намерих къде са зададени стиловете на h1-h5 ( те са HTML тагове, но на панела излизат като параграф 1 до параграф6. WordPress винаги публикува заглавията на страниците или публикациите като

    <

    h1> Ако редактираме и запишем стилирането за h1 – зададем h1 да излиза в червен цвят, някой от изброените шрифтове – Bcad, Georgia, Verdana и максимална плътност на линиите на буквите, а в страницата запишем ново подзаглавие в което не сме променяли текста, (задали сме цветът на

    <

    h1> да е червен, в първият намерен по реда на изброяване на фонтовете, максимално удебелен ( от 400 до 900))

    h1 { font-size: 42px; line-height: 1.2; color: red; font-family: bCAD, Georgia, Verdana; font-weight: 900; }

    Ако такъв текст е в текста - мога през текстовият редактор да го стилирам с инлайн CSS на място, но заглавията са недостъпни. Затова потърсих откъде се задава

    <

    h1> и така да стилирам заглавията на темите, a ако реша да използвам

    <

    h1>тепърва в текст а не като заглавие на тема ще се наложи тепърва да го стилирам по желаният начин.

    И се получи това:

    <

    h2> е по- дребен от

    <

    h1>, това се вижда и от кода на двата реда, но явно има разлика в големините на 2-та шрифта, затова се получи така, че

    <

    h1> е по- дребен от

    <

    h2> и ще трябва да се коригира размерът който задаваме на

    <

    h1> Освен вече демонстрираните стилове може да се наслагат ое ного - фон, рамка и т.н., но синтаксисът на таговете е предмет на разглеждане в курса по HTML / CSS на Аула.