Универсальный HTML5 шаблон страницы

<!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

Первоначальная настройка:

  1. Создаём БД и пользователя для WordPress
  2. Качаем WordPress, заливаем на хостинг и распаковываем
  3. Настраиваем
  4. Переносим WordPress в другую папку

Необходимые плагины:

  1. UpdraftPlus: бэкап сайта
  2. iThemes Security: блокирует вход в WordPress после 3х неудачных попыток. Много настроек. Встроенный бэкап.
  3. CleanTolk: антиспам для комментариев.
  4.  Yoast SEO: sitemap, интеграция с searchconsole, сниппеты, мета-теги, автоматические рекомендации и др.
  5. Cyr to Lat enhanced: переводит кириллические ссылки в транслит
  6. AddToAny: кнопки соц сетей

Настройка аналитики

  1. Установка 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 форматирование выделенного