<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, minimum-scale=1.0"> <title>Title</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta property="og:title" content="Почасовой прогноз погоды для Москвы"/> <meta property="og:description" content="Почасовой прогноз погоды для Москвы на сегодня. Температура воздуха, осадки, облачность, скорость ветра."/> <meta property="og:image" content="/og_image.png"/> <meta property="og:type" content="website"/> <meta property="og:site_name" content="Яндекс.Погода"/> </head> <body> <header> <nav> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav> </header> <main> <article> <h1></h1> </article> </main> <footer> </footer> </body> </html>
Установка и настройка WordPress
Первоначальная настройка:
- Создаём БД и пользователя для WordPress
- Качаем WordPress, заливаем на хостинг и распаковываем
- Настраиваем
- Переносим WordPress в другую папку
Необходимые плагины:
- UpdraftPlus: бэкап сайта
- iThemes Security: блокирует вход в WordPress после 3х неудачных попыток. Много настроек. Встроенный бэкап.
- CleanTolk: антиспам для комментариев.
- Yoast SEO: sitemap, интеграция с searchconsole, сниппеты, мета-теги, автоматические рекомендации и др.
- Cyr to Lat enhanced: переводит кириллические ссылки в транслит
- AddToAny: кнопки соц сетей
Настройка аналитики
- Установка Google Tag Manager: придётся редактировать файл header.php темы! (Придумать что-то по лучше, посмотреть плагины)
Sublime Text v.3
Основные плагины:
- Package Control: управление плагинами;
- AutoFileName: вставка ссылок на файлы в код;
- Color Highlighter: работа с цветом — пипетка и подсветка;
- Emmet: основные сниппеты;
- FileDifs: сравнение двух файлов;
- HTML-CSS-JS Prettify: автоформат для HTML/CSS/JS
- HTML5: сниппеты для тегов HTML5
- Sass: поддержка sass
- SideBarEnhancements: расширенные возможности боковой панели;
- SublimeCodeIntel: автокомплит для кода
- SublimeLinter
Горячие клавиши:
^s сохранить
lorem{Tab} вставить текст «lorem …»
^P поиск по меню
^z отменить (undo)
^p поиск по файлам проекта
^r поиск по функциям
^g переход по номеру строки
^/ комментировние строки/выделенного
shift-^/ комментирование тега/блока
^F2 установить bookmark
F2 следующий bookmark
^K удалить линию
F11 переключение full screen/wibdow
Page control:
SideBarEnhancements:
Emmet:
Expand Abbreviation – Tab or Ctrl+E
Interactive “Expand Abbreviation” — Ctrl+Alt+Enter
Match Tag Pair Outward – Ctrl+, (PC)
Match Tag Pair Inward – Shift+Ctrl+0
Go to Matching Pair – Ctrl+Alt+J
Wrap With Abbreviation — Shift+Ctrl+G
Go to Edit Point — Ctrl+Alt+→ or Ctrl+Alt+←
Select Item – Shift+Ctrl+. or Shift+Ctrl+,
Toggle Comment — Shift+Ctrl+/
Split/Join Tag — Shift+Ctrl+`
Remove Tag – Shift+Ctrl+;
Update Image Size — Ctrl+U
Evaluate Math Expression — Shift+Ctrl+Y
Reflect CSS Value – Shift+Ctrl+R
Encode/Decode Image to data:URL – Ctrl+’
Rename Tag – Shift+Ctrl+’
LiveReload:
Сначала запустить программу LiveReload, работает только в Chrome (плагин)
File Diffs:
file_diff_menu: Shows a menu to select one of the file_diff commands. If you use the bindings in Example.sublime-keymap, this is bound to ctrl+shift+d.
The rest of the commands do not need to be bound (accessible from the menu):
file_diff_clipboard: Shows the diff of the current file or selection(s) and the clipboard (the clipboard is considered the «new» file unless reverse is True)
file_diff_selections: Shows the diff of the first and second selected regions. The file_diff_menu command checks for exactly two regions selected, otherwise it doesn’t display this command.
file_diff_saved: Shows the diff of the current file or selection(s) and the saved file.
file_diff_file: Shows the diff of the current file or selection(s) and a file that is in the current project.
file_diff_tab: Shows the diff of the current file or selection(s) and an open file (aka a file that has a tab).
file_diff_previous: Shows the diff of the current file or selection(s) and the previous activated file
HTML5:
SublimeCodeIntel:
Alt+Click Jump to definition
Control+Windows+Alt+Up Jump to definition
Control+Windows+Alt+Left Go back
Control+Shift+space Manual CodeIntel
Color Highlighter:
^C выбор цвета
^A выбор способа записи цвета
HTML-CSS-JS Prettify:
^H форматирование выделенного