WP-framework

Based on HTML Framework

• Встановлення
• Верстка
• Сніпети
  • Breadcrumbs
  • Pagination
  • Inline SVG

Встановлення

1. Завантажуємо з офсайту архів останнього WordPress та заливаємо його в новий порожній проект
2. Видаляємо:
   • wp-content/plugins/hello.php
   • wp-content/themes/* (всі стандартні теми)
3. Завантажуємо останню версію WP-framework
4. Копіюємо вміст архіву в корінь свого проекту поверх існуючих файлів
5. Перейменовуємо тему:
   • правимо відповідні рядки в wp-content/themes/theme/style.css
   • замінюємо wp-content/themes/theme/screenshot.png на скріншот проекту (1200х900px)
   • перейменовуємо теку wp-content/themes/theme на ім'я проекту
6. Правимо wp-config.php:
   • прописуємо dev/local домени для автоматичного визначення environment type
   • правимо необхідні wp-config.*.php
   • не забуваємо згенерувати Authentication unique keys and salts
7. Встановлюємо WordPress
   • під час встановлення вказуємо email wordpress@ideus.biz (або клієнта, але не особистий!)
8. Активуємо нашу тему
9. Permalink Settings → Common Settings → Post name (якщо WP попросить внести зміни до .htaccess — потрібно це зробити)
10. Settings → General — встановлюємо таймозону, формати дати-часу тощо.
11. На час розробки слід закрити сайт паролем за допомогою плагіна Password Protected

Верстка

• На етапі верстки під кожну сторінку створюється шаблон виду pagename.php у теці page-templates (ці сторінки також потрібно створити в адміїнці у Pages та прив'язати до них відповідні шаблони). У жодному разі не чіпати без потреби index.php, це універсальний темплейт, а не головна сторінка.
• Не забути створити сторінку для темплейта example.php та стилізувати її.
• Не верстати меню руками а створити їх через адмінку, після чого написавши до них відповідні стилі.
• не вішати класи на елемент p, він не для цього.
• всі блоки, що передбачають виведення форматованого тексту, повинні мати клас b-text і текст усередині них повинен бути у вигляді абзаців, наприклад:

…
<div class="b-article__description b-text">
	<p>Це текст статті, повний чи скорочений — не має значення</p>
	<ul>
		<li>пункт меню</li>
	</ul>
</div>
…

• по можливості не вішати стилі на елементи поза текстовими блоками
• не вішати класи на елементи всередині b-text, це саме той випадок, коли слід використовувати елементи. Наприклад:

…
.b-article {

	&__description {

		p {
			font-size: 15px;
		}

		ul {
			line-height: 2em;
		}
	}
}
…

Сніпети

При верстці хлібних крихт та пагінації слід використовувати наступний код:

Breadcrumbs

<div class="l-breadcrumbs">
	<ul class="b-breadcrumbs">
		<li class="b-breadcrumbs__item">
			<a class="b-breadcrumbs__link" href="#">Item</a>
		</li>

		<li class="b-breadcrumbs__item">
			<a class="b-breadcrumbs__link" href="#">Item</a>
		</li>

		<li class="b-breadcrumbs__item -state_current">
			Item
		</li>
	</ul>
</div>

або просто вставити ось цей код, який одразу буде виводити актуальний HTML для них:

<?php nc_breadcrumbs(); ?>

Pagination

<div class="b-pagination">
	<div class="b-pagination__total">Found 250</div>
	<div class="b-pagination__pages">Page 2 of 25</div>

	<ul class="b-pagination__list">
		<li class="b-pagination__item">
			<a class="b-pagination__link -type_prev" href="#">←</a>
		</li>
		<li class="b-pagination__item">
			<a class="b-pagination__link" href="#">1</a>
		</li>
		<li class="b-pagination__item">
			<span class="b-pagination__link -state_active">2</span>
		</li>
		<li class="b-pagination__item">
			<span class="b-pagination__link -type_dots">…</span>
		</li>
		<li class="b-pagination__item">
			<a class="b-pagination__link" href="#">25</a>
		</li>
		<li class="b-pagination__item">
			<a class="b-pagination__link -type_next" href="#">→</a>
		</li>
	</ul>
</div>

Inline SVG

Усі інлайнові SVG повинні бути у окремих svg-файлах і додані на сторінку за допомогою наступного кода:

<?php include( get_theme_file_path( 'assets/img/path_to_image.svg' ) ); ?>