Test

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"67q0u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Всем доброго времени суток, с вами как всегда я, ваш верный друг и учитель - Фриланс Сенсей. Если вы дошли до этого момента, предварительно ознакомившись с прошлыми частями Библии Фрилансера, сохранив при этом мотивацию и готовность изучать новый для себя материал, то я вас поздравляю - сегодня мы начнём делать что-то действительно практичное, а именно начнём знакомиться с вёрсткой, языком разметки, стилями и так далее. ","type":"unstyled","key":"bl1s8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Так как вы дошли до этого самого долгожданного момента - я полагаю, что вы достойны узнать основную идею нашего сайта. Создать информационный портал, интернет магазин, или же написать какой-либо не сложный онлайн сервис - это конечно круто, но я уверен, что вы и так с этим сможете самостоятельно, причем довольно скоро. То, чем скоро будет являться наш сайт - вы узнаете уже совсем скоро. ","type":"unstyled","key":"336na"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML и CSS и почему их не стоит учить","type":"header-two","key":"cpm2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Не ожидали что мы начнём с создания своей собственной темы? При этом с нулевым багажом знаний. Не переживайте, вы со всем справитесь! ","type":"unstyled","key":"81um9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как я ранее говорил - Google может помочь нам выбраться даже из такой ситуации.","type":"unstyled","key":"am075"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Если вы думаете, что все веб-разработчики помнят абсолютно все стили наизусть - вы глубоко ошибаетесь. Лично я, никогда не пытался выучить CSS и HTML, а в чём смысл? в веб консоли можно вручную подобрать CSS к определенному элементу просто тыкая стрелочкой вниз, при этом ещё и наблюдая за визуальным изменением в реальном времени. HTML код так же намного быстрей найти готовый вариант, скопировать и изменить под себя (не во всех случаях, но большинство точно). ","type":"unstyled","key":"cvv4v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Например,- мне нужно внедрить микроразметку структуризации данных Schema.org на сайт (в следующих уроках обязательно расскажу что это такое и зачем она нужна). вместо того, что б вручную писать этот код, я просто захожу на наш хостинг reg.ru, захожу в код страницы, нахожу микроразметку введя в \"CTRL + F\" слово \"schema\", нахожу, вырезаю, вставляю и заменяя ,где нужно, каждый пункт. ","type":"unstyled","key":"dnreq"},{"data":{"image":{"id":"5f098add38d0c01c789d122b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"flhvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" С микроразметками я работаю очень и часто, встречаю их даже чаще, чем хорошую погода на улице. За 7 лет работы, не зависимо от твоего желания, эту микроразметку ты не то что запомнишь, - ты не сможешь забыть её даже после полной амнезии. Да, поверь, я знаю что говорю. Нарисовать ее пиксель в пиксель с завязанными глазами для тебя будет не сложнее чем дышать. Естественно речь здесь идёт не только о разметках, но и вообще обо всех элементах, что более или менее часто встречается при работе. Однако ,даже так, смысла писать всё самому вручную - нет. Намного быстрее будет скопировать шаблон и отредактировать его. ","type":"unstyled","key":"2pj1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" И хоть я и занимаюсь ВЕБом уже более 7ми лет, сделать точно такую же задачу за такое же время как и я, а то и быстрее, сможет каждый первый, кто умеет грамотно гуглить. Не бойся начинать ничего не зная, тебе не обязательно знать. Тебе нужно понять суть и научиться искать то, что нужно. И ты уже будешь не хуже меня и сможешь выполнить абсолютно любую поставленную перед тобой задачу. ","type":"unstyled","key":"ag9k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" На изучение и HTML и CSS не стоит тратить ни единую минуту. Смотря на тот же язык разметки и свойства стилей, легко можно сориентироваться и полностью понять его предназначение. И видя их с каждым разом ты хочешь-не-хочешь хоть что-то да запомнишь. ","type":"unstyled","key":"55dgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот с такими напутственными словами, я с радостью перейду к основам и структуре HTML и CSS, поняв которые ты уже сможешь сверстать практически что угодно.","type":"unstyled","key":"3vmqu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" И так, поехали! ","type":"unstyled","key":"9ff5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b1dm2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":1,"style":"BOLD"}],"text":" Темы Wordpress, их структура и принцип их работы. Создаём свою первую тему. ","type":"header-two","key":"4r87g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7a1lb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На момент последней части Библии фрилансера, мы установили Wordpress и разобрали его основные возможности. При завершении установки Wordpress на сайт за ним автоматически закрепляется стандартная тема. На данный момент наш сайт выглядит следующим образом:","type":"unstyled","key":"29l4j"},{"data":{"image":{"id":"5f099340f607aa1efb2bb624"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"79a3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В прошлый раз я упомянул об основным файлах практически каждой темы WP. ","type":"unstyled","key":"2dugs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" index.php (основная страница), header.php (шапка, на всех страницах одинакова), footer.php (подвал, на всех страницах одинаковый, functions.php (функционал темы), page.php (шаблон страницы), single.php (шаблон записей) и также Style.css (стили темы) и др. ","type":"blockquote","key":"3noti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Найти и редактировать их можно через админку сайта - внешний вид - редактор. ","type":"unstyled","key":"3b034"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но для начала я предлагаю отправится на поиск подходящей для нас темы, основными критериями которой являются элементарность, простота минимализм. Вбив в поиске тем \"minimal\" на 7ой строчке я обнаружил как раз то, что нам нужно. ","type":"unstyled","key":"7pe1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Arke, я выбираю тебя!","type":"unstyled","key":"4moip"},{"data":{"image":{"id":"5f099537dfb754577ddd8e89"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"35ddh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Устанавливается тема просто - в один клик, после чего её нужно активировать (так же в клик). Сперва я решил посмотреть на функционал данной темы. Зайдя в внешний вид - настройки - я ещё больше удостоверился в правильности своего выбора - настроек было меньше, чем у стандартных встроенных тем. Это как раз то что нам нужно!","type":"unstyled","key":"6fno1"},{"data":{"image":{"id":"5f0995e52738bb4cd6ac0050"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3i5u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Сразу хочу всех предупредить, что сайт у нас будет, мягко говоря, необычным. ","type":"unstyled","key":"app6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Однако в любом случае, структура сайта должна оставаться неизменной, ","type":"unstyled","key":"avp3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стандартный шаблон для каждого сайта выглядит примерно так: ","type":"unstyled","key":"3s19v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":1,"style":"BOLD"}],"text":" ","type":"blockquote","key":"fnbup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"75gnd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"649bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Test ","type":"blockquote","key":"1od8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"c0dni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cq0vc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"1j3eh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"cdcsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"aopk2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь здесь всё понятно, и обьяснять ничего не придется, тем более это вы должны бы знать со школы с уроков информатики. ","type":"unstyled","key":"e7tte"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Для начала нам необходимо избавиться от всех лишних деталей на главной странице (точнее практически всех). Мы заходим в внешний вид, редактор, ищем файл index.php (именно он отвечает за главную страницу), сверху находится код, который подгружает файл header.php, а снизу код, который подгружает Footer.php. Такой же код установлен как на шаблонах страниц, так и на шаблоне записей, и подтягиваться он в любом случае будет. ","type":"unstyled","key":"468eq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Нам необходимо убрать его только с главной страницы, поэтому смело стираем весь index.php и вставляем стандартный шаблон HTML с сайта.","type":"unstyled","key":"asuk0"},{"data":{"image":{"id":"5f099f76a526e3338eb48fef"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"m3n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После сохранения на главной странице сайта нас ждёт белый лист, а это значит что можно начинать творить. ","type":"unstyled","key":"76ebk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спустя час поиска подходящего фона - я остановился на анимированом GIF изображении, Для его внедрения нам поможет стиль \"Background-image\", что довольно логично. Вбив в гугл нужный мне запрос, по первой же ссылке я скопировал код стиля и вставил его между атрибутами