WordPress. Начальное руководство

Содержание

Приступая к работе
- Установка движка
- Установка темы
- Активация темы
- Инсталляция SQL дамп файла
- Установка плагинов
- Настройка ссылок
- Настройка меню
Шаблоны страниц и боковых панелей
Посты и категории
- Добавление поста
- Добавление слайда (как поста)
- Добавление поста в Портфолио
- Добавление тестимониала
- Добавление поста FAQ
- Добавление поста Our team
- Добавление поста Service
Создание страницы Портфолио
Шорткоды
Плагины и виджеты
Настройки темы
Выводы

Приступая к работе

Установка движка

Когда Вы закончили подготовку, Вы можете начать скачивание и установку движка WordPress.

Важно скачать только правильную версию движка, которая отображена на странице просмотра шаблона, т.е. шаблон разрабатывается именно для этой конкретной версии.

Движок можно скачать с официального сайта WordPress.org Скачать WordPress. Если Вам нужны более ранние релизы, то Вы можете скачать их здесь: Архив Релизов.
После скачивание ZIP файла движка его нужно распаковать. Это можно сделать любым архиватором.

Следующие туториалы покажут, как распаковать файлы корректно на Windows(WinZip) и MAC(StuffitExpander).
После разархивирование нужно скачать файлы WordPress на сервер. Распакованные файлы выглядят следующим образом:
- wp-admin
- wp-content
- wp-includes
- index.php
- wp-activate.php
- wp-app.php
- wp-atom.php
- wp-blog-header.php
- wp-comments-post.php
- …другие файлы
Все файлы должны быть загружены в корневую директорию на Вашем сервере, как правило, это PUBLIC_HTML или WWW.

Если у Вас нет папок PUBLIC_HTML или WWW на сервере, обратитесь к Вашему хостинг-провайдеру.

Следующий туториал покажет, как загрузить файлы на сервер:
- Как загрузить файлы
Теперь нужно создать базу данных для WordPress.

Ознакомьтесь со следующими туториалами:
- Как создать базу данных
- Как создать MySQL базу данных на GoDaddy
В адресной строке браузера введите Ваш сайт, что начать инсталляцию.
Создание файла конфигурации. Начало установки WordPress предложит Вам создать файл конфигурации, нажмите на Create Configuration File.
Добавление деталей базы данных. На данном этапе нужно ввести детали созданной базы данных.
Добавление деталей сайта. На следующим шаге Вам нужно будет ввести такие детали:
- название сайта
- логин и пароль администратора
- email адрес администратора
Далее нажмите на кнопку Install WordPress.

Если все детали корректны, Вы увидите уведомление о правильной установке и кнопку для входа в админ-панель.

Установка темы

Загрузка по FTP:

Распакуйте файлы архива themeXXXX.zip.
Загрузите папку themeXXXX в директорию /wp-content/themes/ на Вашем сервере.

Загрузка через админ-панель:

Откройте админ-панель (добавьте /wp-admin после Вашего сайта)
Откройте Appearance (дизайн)
Выберите опцию Add New Themes (добавить новую тему)
Далее Add new (добавить новую)
Загрузите файл themeXXXX.zip

Установка WordPress http://codex.wordpress.org/Installing_WordPress

Ознакомьтесь со следующими детальными туториалами:

Активация темы

После загрузки темы, активируйте их в Appearance > Themes.
Использование тем http://codex.wordpress.org/Using_Themes

Установка SQL дамп файла

ВНИМАНИЕ: Импортирование дамп файла перезапишет все существующие настройки и контент. Если Вы хотите сохранить текущий контент, НЕ импортируйте дамп файл.
Следующий иуториал покажет, как установить WordPress тему поверх существующего сайта.

Всегда делайте резервную копию базы данных перед любыми модицикациями.

Префикс базы данных должен быть wp_

Чтобы сделать шаблон, как на демо-сайте, следуйте инструкциям ниже.

Установите шаблон, следуя таким инструкциям.
Затем распакуйте и скопируйте файлы в папке «plugins» в директорию /wp-content/plugins/ или используйте админ-панель Dashboard > Plugins > Add new > Upload и выберите Ваш плагин (из папки /sources/plugins/).
Скопируйте папку «uploads» в /wp-content на сервере.
Откройте файл themeXXXX.sql из папки sources любым текстовым редактором (например, Dreamweaver или Notepad) и замените все фразы «your_website_url_here» на ссылку Вашего сайта, используя инструмент Find and Replace (найти и заменить) — Ctrl+H. Ссылка на сайт должна быть такой: http://www.mywebsite.com

(без закрывающего последнего слеша «/»)

Убедитесь, что данный слеш «/» отсутствует в ссылке.
Сохраните изменения.
Далее, нужно импортировать файл в базу данных, используя инструмент для управления базами данных — phpMyAdmin.

Ознакомьтесь следующими туториалами:

Установка плагинов

Откройте админ-панель, затем вкладку Plugins
Нажмите Add New (добавить новый).
Из верхнего меню выберите Upload (загрузить).
Нажмите Browse и выберите файл с плагином. Как правило, они находятся в папке sources/plugins. Выберите файл, нажмите Open, затем Upload.
Когда загрузка завершена, активируйте плагин — ссылка Activate Plugin.

Ознакомьтесь со следующими туториалами:

Теперь нужно загрузить изображения. Загрузите папку «uploads» из «sources» в директорию «wp-content» на сервере. Вы можете использовать FTP клиент. Перезапишите существующие файлы.

Настройка пермалинок (Permalinks)

Замечание: настройки темы стразу после установки.

В шаблоне по умолчанию используются стандартные пермалинки http://demolink.org/?p=1, их можно заменить на http://demolink.org/home. Это полезно для SEO-оптимизации. Эффективность таких ссылок раскрыта на сайте разработчиков — http://codex.wordpress.org/Using_Permalinks

Проделайте следующие шаги:

Откройте админ-панель (Dashboard).
Нажмите Settings
Далее Permalinks
В настройках пермалинок выберите Custom structure, и скопируйте следующие настройки /%category%/%postname%/
Нажмите Save, чтобы сохранить изменения.

Если Вы используйте dump.sql файл, то все настройки будут установлены автоматически. Однако в некоторых случаях все равно нужно сохранить текущие изменения, нажав на Save.

Настройка меню

WordPress 3.+ предоставляется с панелью управления меню, что делает настройку навигации сайта легкой и удобной.

В данной теме есть два меню:

Header Menu — меню в хедере
Footer Menu — в меню

Больше информации о найстроке меню в WordPress 3.0, смотрите на http://codex.wordpress.org/Appearance_Menus_SubPanel

Данные меню являются наиболее используемыми в шаблонах. Различные шаблоны имеют различные меню. Ознакомитесь с документацией Вашего шаблона для большей информации.

Замечание! Если меню не отображается, как на демо-сайте, откройте в админ-панели Appearance > Menus и выберите «Header Menu» из выпадающего списка.

Шаблоны страниц и боковых панелей

Шаблоны страниц

Шаблон по умолчанию (с правой панелью)
Полная ширина (шаблон страницы только с одной колонкой без боковых боксов)
Portfolio 1 column (шаблон страницы только с одной колонкой портфолио)
Portfolio 2 columns (шаблон страницы портфолио с двумя колонками)
Portfolio 3 columns (шаблон страницы портфолио с тремя колонками)
Portfolio 4 columns (шаблон страницы портфолио с четырмя колонками)
Page Testimonials (шаблон страницы с постами-тестимониалами)
Page FAQs (шаблон страницы для FAQs)

Это наиболее часто используемые шаблоны страниц в шаблонах. Различные шаблоны имеют различные страницы. Ознакомитесь с документацией Вашего шаблона для большей информации.

Позиции блоков

Header — расположен вверху страницы
Before Home Page Content — расположен перед контентом домашней страницы.
Home Page Content — находится в середине страницы.
After Home Page Content — расположен внизу контента.
Sidebar — расположен на правой или левой боковой панели страниц
Footer — расположен внизу страниц.

Это наиболее часто используемые блокив шаблонах. Различные шаблоны имеют различные блоки. Ознакомитесь с документацией Вашего шаблона для большей информации.

Посты и категории

Добавление категории

Данная ссылка покажет, как добавлять категории в WordPress: http://codex.wordpress.org/Manage_Categories_SubPanel

Откройте админ-панель.
Нажмите на вкладку Post
Затем Categories для постов
Введите название категории
Нажмите Add New Category

Создание поста

Откройте админ-панель.
Нажмите на вкладку Post
Затем Add New
Введите контент Вашего поста. Для большей информации о добавлении поста: http://codex.wordpress.org/Posts_Add_New_SubPanel
И нажмите Publish, чтобы опубликовать пост.

Форматы постов

Для большей информации о форматах постов посетите сайт разработчиков: http://codex.wordpress.org/Post_Formats

Создание поста в слайдере (слайды)

Слайды — это кастомные посты http://codex.wordpress.org/Post_Types#Custom_Types, и они отличаются от обычных постов, постов блога, постов портфолио. Они позволяют легко работать с контентом в WordPress.

Следующий слайдер основан на Nivo Slider.

В Вашем шаблоне может быть другой плагин для слайдера. Ознакомитесь с документацией Вашего шаблона для большей информации.

Откройте админ-панель.
Нажмите на вкладку Slider
Затем Add New
Вставьте название title.
Загрузите изображение, используя опцию Featured Image (нажмите на ссылку Set featured image (добавить изображение)
Вы можете использовать следующие кастомные поля для слайда :
- slider-url — ссылка на страницу.
Для описания слайда, используйте опцию редактирования поста. Тут Вы можете использовать HTML теги, например:
```
<h2>Integrate.</h2>
<p>Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.</p>
<a href="#" class="button">Read More</a>
```
Нажмите на кнопку Publish

Добавление поста портфолио

Элементы портфолио, как правило, касмотные посты http://codex.wordpress.org/Post_Types#Custom_Types, и они отличаются от обычных постов, постов блога, постов портфолио. Они позволяют легко работать с контентом в WordPress.

Откройте админ-панель.
Нажмите на вкладку Portfolio
Затем Add New
Заполните необходимые поля (title, content).
Загрузите изображение, используя опцию Featured Image (нажмите на ссылку Set featured image (добавить изображение)
Следующие опции доступны для портфолио:
- lightbox-url — путь к большому изображению. Далее оно будет показываться с помощью плагина prettyPhoto
Нажмите Publish, чтобы опубликовать пост

Добавление поста-тестимониала

Откройте админ-панель.
Нажмите на вкладку Testimonials
Далее Add New
Заполните все поля (title, content)
Загрузите изображение, используя опцию Featured Image (нажмите на ссылку Set featured image (добавить изображение)
Вы можете использовать следующие кастомные посты:
- testimonial-name — имя автора
- testimonial-url — ссылка автора
Нажмите Publish, чтобы опубликовать пост

Добавление поста FAQ

Откройте админ-панель.
Нажмите на вкладку FAQs
Затем кнопку Add New
Так как, это тип поста вопрос/ответ, название будет вопросом, а контент — ответом.
Нажмите Publish, чтобы опубликовать пост

Добавление поста Our Team

Откройте админ-панель.
Нажмите на вкладку Our Team
Затем Add New
Заполните необходимые поля (title, content).
Загрузите изображение, используя опцию Featured Image (нажмите на ссылку Set featured image (добавить изображение)
Нажмите Publish, чтобы опубликовать пост

Добавление поста Service

Откройте админ-панель.
Нажмите на вкладку Services
Затем Add New
Заполните необходимые поля (title, content).
Загрузите изображение, используя опцию Featured Image (нажмите на ссылку Set featured image (добавить изображение)
Нажмите Publish, чтобы опубликовать пост

В Вашем шаблоне может быть кастомные посты. Ознакомитесь с документацией Вашего шаблона для большей информации.

Создание страницы портфолио

Страницы портфолио создаются с помощью шаблона страницы

Откройте админ-панель.
Нажмите Pages
Нажмите на вкладку Add New
Введите название, например, Страница портфолио
Выберите шаблон страницы ( Portfolio 1 column, Portfolio 2 columns, Portfolio 3 columns или Portfolio 4 columns из выпадающего меню Page Attributes)
Следующие кастомные поля доступны для страницы потрфолио:
- page-desc — описание страницы
- category-include — название категории для страницы. Вам необходим слаг (slug) данной категории.
Нажмите Publish, чтобы опубликовать пост

Не добавляйте контент в редактор поста, если Вы используете один из шаблонов страницы.

Шаблоны портфолио и катомные посты могут отличаться, например: Gallery, Services, Project и др.

Шорткоды

Шорткоды — это мощный инструмент для построения Вашего контента http://codex.wordpress.org/Shortcode.

Шорткоды легки в использовании. Убедитесь, что Вы редактируете пост в Визуальном режиме.

Нажмите кнопку для шорткодов.

Вставьте необходимый шорткод.

Доступны следующие шорткоды:

Основные
- Recent Posts — для недавно опубликованных постов.
- Recent Testimonials — недавние тестимониалы
- Popular Posts — для популярных постов
- Recents Comments — для недавних комментариев
- Tags — для TagCloud (облака тегов)
Сетка колонок
- grid_1
- grid_2
- grid_3
- … — шорткоды, которые используются фрейворком, основанном на системе 960gs.
Гибкие колонки
- 1/2
- 1/3
- 2/3
- … — шорткоды, которые используются фрейворком, основанном на гибких колонках.
HTML
- Button — шорткод для кнопки
- Drop Cap — шорткод, который делает первую букву абзаца Большой.
- Blockquote — для цитат
- Frame — для вставки изображения или любого другого объекта
- Frame Left — шорткод для вставки изображения или объекта в левую колонку.
- Frame Right — шорткод для вставки изображения или объекта в правую колонку.
- Horizontal Rule — горизонтальная разделительная линия
Окна оповещения
- Alert — сообщение об ошибке
- Approved — сообщение подтверждения
- Attention — шорткод для блока внимания
- Notice — блок уведомления
Аудио и видео
- Audio — вставляет аудио котент (поддержка HTML тегов)
- Video — вставка видео. Youtube, Vimeo или любой файл на Вашем сервере.
Tabs
- Шорткоды для вкладок.
Toggle
- Шорткод для скрипта-переключателя. С количеством скриптов, которые создают эффект «Аккордеона».

Шорткоды в Вашем конкретном шаблоне могут отличаться. Ознакомитесь с документацией Вашего шаблона для большей информации.

Плагины и кастомные виджеты

Плагины

Виджеты, использованные в теме, перечислены ниже.

WP PageNavi

Скачать: http://wordpress.org/extend/plugins/wp-pagenavi/
Описание: Для навигации страниц.

Contact Form 7

Скачать: http://wordpress.org/extend/plugins/contact-form-7/
Описание: Контактная форма для страницы контактов.

Это наиболее часто используемые плагины. В Вашем конкретном шаблоне они могут отличаться. Ознакомитесь с документацией Вашего шаблона для большей информации.

Widgets

Следующие виджеты используются в теме:

My — Recent Comments

Отображает последние комментарии. Виджет включает следующие опции:

Title: — название
Number of comments to show: — количество колонок.

My — Popular Posts Widget

Отображает популярные посты. Следующие опции доступны:

Title: — название
Posts per page: — кол-во отображаемых постов
Link Text: — текст ссылки
Link Url: — ссылка, которая отображается в виджете.

My — Post Cycle

Отображает недавние поста, также позволяет отображать кастомные посты. Он также используется как слайдшоу. Для него доступны такие опции:

Title: — название
Limit Text: — кол-во слов к кратком описании.
Posts per page: — кол-во постов на странице.
Post Type: — тип поста.

My — Recent Posts

Отображает недавние посты. Вы также можете использовать кастомные посты некоторых категорий. Виджет имеет следующие опции:

Title: — название
Category Slug: — слаг категории.
Posts per page: — кол-во отображаемых постов.
Link Text: — текст виджета.
Link Url: — ссылка виджета.

My — Request a Quote

Расширенный виджет, который имеет такие поля:

Title: — название
Text: — текст виджета
Button Text: — название кнопки
Button URL: — ссылка кнопки

My — Advanced Cycle

Многофункциональный виджет, которвй может отображать посты разных типов. Виджет включает такие опции:

Title: — название
Posts type: — тип поста
Number of posts to show: — кол-во постов
Sort by: — сортировка по:
Reverse sort order (ascending): — порядок отображения постов
Show number of comments — отображение кол-ва комментов
Show meta — мета информация
Container class: — вид «контейнера» для виджета. установлен как featured_custom_posts по умолчанию
Show post title — показывать название поста
Date as title — дата как название
Before title: — HTML теги перед названием
After title: — HTML после названия
Show post excerpt — показывать выдержку
Excerpt length (words): — размер выдержки (кол-во слов)
Excerpt as link — выдержка как ссылка
Show «More link» — показывать ссылку More после поста
Link text: — текст ссылки
Link class: — CSS класс для ссылки More
Show post thumbnail — показывать миниатюру поста
Width: — ширина изображения
Height: — высота изображения
Thumbnail as link — конвертация изображения в ссылку
Show global link to all posts — показывать глобальную ссылку для всех постов
Link text: — текст ссылки
Link URL: — ссылка

My — Social Networks

Виджет для ссылок социальных сетей. Он имеет такие опции:

Title: — название
ссылка Facebook, ссылка Twitter, ссылка Flickr и т.д. — ссылки на аккаунты в социальных сетях
Display: способ отображения иконок.
- Icons — только иконки.
- Labels — только текст.
- Both — текст и иконки.

My — Twitter

Виджет для отображения твиттов с Вашего твиттер-аккаунта. Доступны такие опции:

Title: — название
Twitter Name: — название
Twitts number: — кол-во твиттов для отображения

My — Flickr

Виджет отображает изображения из галереи flickr. Опции виджета:

Title: — название
Flickr ID: — ID flickr аккаунта
Images count: — кол-во изображений
Link Text: — текст под изображениями

Это стандартные и наиболее используемые виджеты в шаблонах. В Вашем конкрентном шаблоне они будут отличаться. Ознакомитесь с документацией Вашего шаблона для большей информации.

Опции темы

В данной теме есть настройки. Они позволяют легко и быстро изменить цвет, порядок элементов, включить или выключить их. Настройки доступны в Appereance > Theme Options в админ-панели.

Общие настройки

Body styling — Вы можете выбрать цвет контента или фона
Header background color — цвет фона хедера
Buttons and links color — цвет кнопок и ссылок
Typography — настройка шрифтов
Display search box? — показать/спрятать поисковую панель в хедере
Кастомные CSS стили — если Вы хотите добавить некоторые CSS классы, но Вы не хотите копаться в главном CSS файле, Вы можете использовать это поле. Просто добавьте сюда новые CSS классы.

Лого

What kind of logo? — выбирает вид лого (изображение или текст).
Logo URL — здесь Вы можете загрузить новое изображение или выбрать его из Медиа библиотеки.

Главное меню

Delay — задержка а миллисекундах, когда меню пропадает
Fade-in animation — включает/выключает анимацию затухания
Slide-down animation — включает/выключает анимацию слайдера
Speed — скорость выпадания меню
Arrows markup — включает/выключает стрелки для элементов меню или подменю
Drop shadows — включает/выключает тени подменю

Настройки слайдера

Slider effects — эффект слайдера
Number of slices — кол-во «кусочков» слайда
Box columns — коло-во колонок (только для анимации, основанной на блоках)
Box rows — кол-во блоков в слайдере (только для анимации, основанной на блоках)
Animation speed — скорость анимации в миллисекундах
Pause time — задержка между слайдами (ms)
Display Next & Prev navigation — включает/выключает кнопки Вперед и Назад
Display Next & Prev navigation only on hover? — указывает, когда именно навигация отображается
Show Pagination — показывает нумерацию страниц (например, 1, 2, 3, 4 …)
Opacity of caption — прозрачности

Секция блога

Sidebar position — позиция слайдера (левая/правая колонка)
Blog image size — размер изображения (нормальное или большое) для страницы блога
Single post image size — настройка изображения для поста
Enable Meta for blog posts? — отображение мета-информации для поста
Enable excerpt for blog posts? — отображение выдержки для постов

Футер

Footer copyright text — текст в футере. Если поле пустое, то будет отображаться текст по умолчанию. Он находится в файле footer.php.
Google Analytics Code — Вы можете собирать статистическую информацию для SEO. Например, Google Analytics Code
Feedburner URL — Feedburner — это сервис Google, который отвечает за RSS. Вставьте ссылку Feedburner, чтобы читатели блога видели ее.
Display Footer menu — отображение меню футера

Это наиболее стандартные настройки темы в шаблонах. Ваш конкретный шаблон может иметь другие настройки. Ознакомитесь с документацией Вашего шаблона для большей информации.

Выводы

Язык

Top Menu

Pre-Sale Questions

General Tutorials