Всем доброго времени суток, с вами как всегда я, ваш верный друг и учитель - Фриланс Сенсей. Если вы дошли до этого момента, предварительно ознакомившись с прошлыми частями Библии Фрилансера, сохранив при этом мотивацию и готовность изучать новый для себя материал, то я вас поздравляю - сегодня мы начнём делать что-то действительно практичное, а именно начнём знакомиться с вёрсткой, языком разметки, стилями и так далее.
Так как вы дошли до этого самого долгожданного момента - я полагаю, что вы достойны узнать основную идею нашего сайта. Создать информационный портал, интернет магазин, или же написать какой-либо не сложный онлайн сервис - это конечно круто, но я уверен, что вы и так с этим сможете самостоятельно, причем довольно скоро. То, чем скоро будет являться наш сайт - вы узнаете уже совсем скоро.
HTML и CSS и почему их не стоит учить
Не ожидали что мы начнём с создания своей собственной темы? При этом с нулевым багажом знаний. Не переживайте, вы со всем справитесь!
Как я ранее говорил - Google может помочь нам выбраться даже из такой ситуации.
Если вы думаете, что все веб-разработчики помнят абсолютно все стили наизусть - вы глубоко ошибаетесь. Лично я, никогда не пытался выучить CSS и HTML, а в чём смысл? в веб консоли можно вручную подобрать CSS к определенному элементу просто тыкая стрелочкой вниз, при этом ещё и наблюдая за визуальным изменением в реальном времени. HTML код так же намного быстрей найти готовый вариант, скопировать и изменить под себя (не во всех случаях, но большинство точно).
Например,- мне нужно внедрить микроразметку структуризации данных Schema.org на сайт (в следующих уроках обязательно расскажу что это такое и зачем она нужна). вместо того, что б вручную писать этот код, я просто захожу на наш хостинг reg.ru, захожу в код страницы, нахожу микроразметку введя в "CTRL + F" слово "schema", нахожу, вырезаю, вставляю и заменяя ,где нужно, каждый пункт.
С микроразметками я работаю очень и часто, встречаю их даже чаще, чем хорошую погода на улице. За 7 лет работы, не зависимо от твоего желания, эту микроразметку ты не то что запомнишь, - ты не сможешь забыть её даже после полной амнезии. Да, поверь, я знаю что говорю. Нарисовать ее пиксель в пиксель с завязанными глазами для тебя будет не сложнее чем дышать. Естественно речь здесь идёт не только о разметках, но и вообще обо всех элементах, что более или менее часто встречается при работе. Однако ,даже так, смысла писать всё самому вручную - нет. Намного быстрее будет скопировать шаблон и отредактировать его.
И хоть я и занимаюсь ВЕБом уже более 7ми лет, сделать точно такую же задачу за такое же время как и я, а то и быстрее, сможет каждый первый, кто умеет грамотно гуглить. Не бойся начинать ничего не зная, тебе не обязательно знать. Тебе нужно понять суть и научиться искать то, что нужно. И ты уже будешь не хуже меня и сможешь выполнить абсолютно любую поставленную перед тобой задачу.
На изучение и HTML и CSS не стоит тратить ни единую минуту. Смотря на тот же язык разметки и свойства стилей, легко можно сориентироваться и полностью понять его предназначение. И видя их с каждым разом ты хочешь-не-хочешь хоть что-то да запомнишь.
Вот с такими напутственными словами, я с радостью перейду к основам и структуре HTML и CSS, поняв которые ты уже сможешь сверстать практически что угодно.
И так, поехали!
Темы Wordpress, их структура и принцип их работы. Создаём свою первую тему.
На момент последней части Библии фрилансера, мы установили Wordpress и разобрали его основные возможности. При завершении установки Wordpress на сайт за ним автоматически закрепляется стандартная тема. На данный момент наш сайт выглядит следующим образом:
В прошлый раз я упомянул об основным файлах практически каждой темы WP.
index.php (основная страница), header.php (шапка, на всех страницах одинакова), footer.php (подвал, на всех страницах одинаковый, functions.php (функционал темы), page.php (шаблон страницы), single.php (шаблон записей) и также Style.css (стили темы) и др.
Найти и редактировать их можно через админку сайта - внешний вид - редактор.
Но для начала я предлагаю отправится на поиск подходящей для нас темы, основными критериями которой являются элементарность, простота минимализм. Вбив в поиске тем "minimal" на 7ой строчке я обнаружил как раз то, что нам нужно.
Arke, я выбираю тебя!
Устанавливается тема просто - в один клик, после чего её нужно активировать (так же в клик). Сперва я решил посмотреть на функционал данной темы. Зайдя в внешний вид - настройки - я ещё больше удостоверился в правильности своего выбора - настроек было меньше, чем у стандартных встроенных тем. Это как раз то что нам нужно!
Сразу хочу всех предупредить, что сайт у нас будет, мягко говоря, необычным.
Однако в любом случае, структура сайта должна оставаться неизменной,
Стандартный шаблон для каждого сайта выглядит примерно так:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>
Надеюсь здесь всё понятно, и обьяснять ничего не придется, тем более это вы должны бы знать со школы с уроков информатики.
Для начала нам необходимо избавиться от всех лишних деталей на главной странице (точнее практически всех). Мы заходим в внешний вид, редактор, ищем файл index.php (именно он отвечает за главную страницу), сверху находится <?php> код, который подгружает файл header.php, а снизу код, который подгружает Footer.php. Такой же код установлен как на шаблонах страниц, так и на шаблоне записей, и подтягиваться он в любом случае будет.
Нам необходимо убрать его только с главной страницы, поэтому смело стираем весь index.php и вставляем стандартный шаблон HTML с сайта.
После сохранения на главной странице сайта нас ждёт белый лист, а это значит что можно начинать творить.
Спустя час поиска подходящего фона - я остановился на анимированом GIF изображении, Для его внедрения нам поможет стиль "Background-image", что довольно логично. Вбив в гугл нужный мне запрос, по первой же ссылке я скопировал код стиля и вставил его между атрибутами <style> в полупустом файле Index.php
Зайдя на сайт сразу стало ясно, что анимацию необходимо подогнать по размеру. Для этого клацаем правой кнопкой мыши в любой части сайта, жмём кнопку "Посмотреть код". Фоновое изображение было прописано для "Body" поэтому выделяем его и начинаем экспериментировать, Введя "Background" мы сможем увидеть абсолютно все стили, которые могут применяться к фоновому изображению. Пару стуков по стрелке вниз, и вот оно! - "background-size", как раз то что нужно. Немного поигравшись значениями и вывел идеальную пропорцию для нашей гифки. Как ни странно, изображение выровнялось на ширину всего экрана на отмене в 100%, поэтому мы вырезаем " background-size: 100%" и вставляем в index.php между <style>.
Одинокая девочка на тёмной улице, совершенно одна... Её взгляд опущен, и глаза залиты слезами...
Пожалуй стоит поставить музяку этой крошке.
следующие 5 часов я облазил всевозможные сайты, перепробовал все варианты, но музыка не запускалась автоматически при заходе на страницу... Мне казалось, что я был обречён... и вдруг... На китайском форуме, когда уже совсем не было надежды, один казах написал, что причиной этому является не только моё рукожопство, но и браузер. Я быстро полез в настройки браузера, посидел там еще часов 5, и наконец-то я смог решить проблему...
Теперь девочке не будет так одиноко...
Спасибо за приятную компанию, с вами был ваш верный друг и учитель, до новых встреч.