эластичном&rdquo

Установка и настройка TinyMCE Advanced

Скачать текстовый редактор TinyMCE Advanced можно с официального сайта вордпресс здесь. Следует заметить, что для разных версий wordpress (2.6, 2.7, 2.8+) нужно использовать свой дистрибутив.  На момент написания статьи последняя версия плагина есть 3.2.7.

Установка стандартная – после скачивания разархивируем и загружаем на фтп блога в папку wp-content/plugins. Далее активируем TinyMCE Advanced из админки, после чего заходим в меню «Параметры» — «TinyMCE Advanced», где нужно произвести его настройку. Финальным аккордом есть очистка кэша браузера.

Перед тем как рассказать о настройке еще пару слов про функциональность модуля. По описанию на официальном сайте в него входит аж 15 других плагинов: Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters и XHTML Extras. Все это возможно получить, установив лишь один TinyMCE Advanced! Кроме английского языка плагин поддерживает и некоторые другие локализации (немецкую, французскую, итальянскую, испанскую, русскую и т.д.). В общем, сомневаться в широких возможностях модуля не приходится.

Настройка TinyMCE Advanced производится в админке блога в одноименном пункте меню. Процесс не сложный, скорее даже интересный. На странице вы увидите 4 строки текстового редактора, куда можно будет разместить различные функциональные клавиши:

эластичном&rdquo

Видите сколько там еще все припасено? Вникать в детали вам уже придется самостоятельно, благо все элементы подписаны и достаточно наглядные. Выделил бы отдельно, пожалуй, блок с функциями для работы с таблицами – позволит быстро и легко создавать, изменять их в тексте. Еще в TinyMCE Advanced можно импортировать в редактор пользовательский css файл стилей – тоже может пригодиться. В целом, как я и сказал с самого начала поста, модуль must have!

Дополнения для TinyMCE Advanced

В блоге есть парочка статей, рассказывающих о расширении возможностей плагина:

  • Изменяем цвет текста в WordPress с помощью модуля TinyMCE Color Grid и не только. Данное решение создает здоровенную палитрую цветов в редакторе + добавляет еще одну полезную функцию. Также в статье найдете хак для functions.php, позволяющий заменять базовые цвета в TinyMCE Advanced на свои.
  • Как подключить шрифт в WordPress редакторе — рассматриваю задачу установки новых пользовательских шрифтов в TinyMCE Advanced, а также добавление Google Fonts через обычные CSS стили.

Как Создать Современный Веб-Сайт Использующий Аккуратную и Лаконичную WordPress Тему

Создание собственного веб-сайта может показаться сложной
задачей, но как только у вас будет четкий план, вы можете быстро запустить свой
сайт. Прежде чем перейти к настройке темы, давайте разберемся с тем, что вам
нужно. 

1. Ваше Уникальное Доменное Имя

Первым делом нужно купить доменное имя для вашего нового
сайта. Если вы создаете сайт для своего бизнеса, то очевидно, для доменного
имени вам следует использовать название вашего бизнеса или название компании.  А если в создаете персноальный авторский блог, в можете использовать доменное имя, которое как-то соотносится с темой вашего блога, или можете использовать свое имя в качестве доменного. Убедитесь так же, что вы выбрали лучшее расширение для вашего доменного имени.

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

2. Хостинг с WordPress Поддержкой

С доменным именем разобрались, теперь пора выбрать хостинг-провайдера. Если в оформляли покупку доменного имени, через такую компанию как BlueHost, SiteGround или что-то подобное, вы могли так же выбрать у них тариф на хостинг.  Ряд тем WordPress на ThemeForest так же имеют в качестве опции возможность размещения на Envato Hosted service. 

Envato Hosted – Премиум Хостинг для WordPress.

Большинство солидных хостинговых компаний, предоставляют
возможность оформить доменное имя бесплатно, если воспользуетесь одним из их
тарифных планов. Если вы покупали доменное имя отдельно где-то еще, то
проведите сравнительное исследование, касательно компаний, предоставляющих
услуги хостинга, прочитайте независимые отзывы пользоватлей.

3. Премиум WordPress Тема с Лаконичным Дизайном 

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

Топовые статьи :  Попробуйте режим читателя в новом Safari 5!

Для этого урока, я использовала популярную тему Roneous WordPress, которая может использоваться в ряде
областей. Тема идет с отличным дизайном, имеет 25 вариантов домашней страницы. Так же в нее включены ряд популярных плагинов, так что вам не придется разбираться с кодом для поддержания работоспособности вашего сайта.

Roneous WordPress с современным дизайном.Clean modern Roneous WordPress theme

4. Контент и Изображения

Последнее, что ам нужно сделать, это собрать вместе на вашем сайте, содержимое и изображения. Рекомендую использовать вам картинки высокого качества, такие как, профессиональные фотографии с Envato Elements. Такие изображения будут отличный визуальным сопровождением для вашей истории, помогут вам установить связь с вашей аудиторией.

Если говорить о контенте, подумайте о том, как вы хотите, чтобы выглядили ваши страницы. Так же напишите пару постов в блог для начала, чтобы ваши посетели знали о вашем бизнесе и о том, что вы предлагаете. Кроме, того вы можете добавить парочку отзывов от ваших клиентов, особенное если вы делаете сайт для своего бизнеса.

Как Быстро Создать Ваш Сайт на WordPress

Установив качественно сделанную WordPress тему и плагины, двайте настроим страницы и перейдем к настройкам темы. Так вы поймете где расположены раличные установки и как настроить цвета, шрифты и макеты для вашего нового сайта.

Как Создать Вашу Домашнюю Страницу

Первый шаг — это создать домашнюю страницу для вашего сайта. Чтобы сделать это зайдите в Pages > Add New (Страницы — Добавить Новую) и назовите ее Home. Как вы можете видеть на картинке, у вас есть дполнительная кнопка, которая позволяет вам использовать Визуальный Кноструктор Сайта.

Тут вы можете выбрать, как кнопку Backend Editor, так и FrontEnd Editor.

Создайте домашнюю страницу для вашего сайта на WordPress.

Редактор бэкенда позволит вам вставить элементы, текстовые блоки или выбрать шаблон.

Элементы Графического Конструктора

Если вы предпочитаете делать все «ручками», начните с добавления количества строк и столбцов. А после того, как вы определитесь со структурой для раздела, вы можете начать размещать элементы, такие как изображения, текст, блоки и другие.

Вид бэкенд редактора.

Другая опция, которая может ускорить вашу работу — заготовки шаблонов. В большинстве случаев, в документации к вашей теме, будет инструкция, как можно импортировать демо контент и шаблоны. Для темы Roneous, все, что вам нужно — это вставить содержимое текстового файла в текстовый редактор. В этом примере, я импортировала  содержимое шаблона Business Agency.

Демо домашней страницы для WordPress темы Roneous.

Последняя часть создания домашней страницы заключается в удалении хедера и названия страниц, чтобы наша страница выглядела как и демонстрационная. Чтобы сделать это, на редакторе страниц, прокрутите вниз до раздела Page Settings. Здесь выберите No header под Header layout и No Title под Page Title Layout:

Настройки страницы для вашей WordPress темы.

Когда вы закончите со своей страницей, нажмите Publish. Затем зайдите в  Settings > Reading и под Front page displays выберите вашу вновь возданную домашнюю страницу. Нажмите Save Changes.

Установки для Чтения на вашем WordPress сайте.

Как Создать Пост для Блога

Подобным образом, мы собираемся создать страницу для блога. Зайдите в Pages > Add New и на этот раз назовите страницу Blog. Для страницы блога, вам не нужно вводить какое-то содержание, так как на ней будут отображаться ваши новые блог посты. Нажмите Publish чтобы создать вашу страницу, а затем вернитесь в настройки Settings > Reading и выберите только что созданную вами страницу как страницу для постов (Posts Page). Сохраните изменения — Save Changes.

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

Как Импортировать Демо Версию

Если вы хотите импортировать демо версию, зайдите в  Tools > Import и выберите WordPress Importer. Установите этот плагин, активируйте его, и затем запустите Его. Загрузите .xml файл, который идет вместе с вашей WordPress темой и щелкните по Upload file and import.

На другой странице вы можете назначить посты для себя и отметить чекбокс Download file attachments. Щелкните по кнопке Submit и демо сайт будет импортирован.

Настройка Параметров для Вашей WordPress Темы

Теперь когда у вас есть основа, вы можете настроит сайт в соответствии с цветами вашего бренда, можете настроить шрифты и другое. Некоторые Современные WordPress темы идут со специальной панелью Опций, а другие могут использовать стандартный WordPress Live Customizer. В нашем случае, чтобы изменить настройки, зайдите в Appearance > Customize. На этом экране, вы можете изменять цвета, шрифты, загрузить логотип, выбрать макет для футера, и еще много чего.

Настройщик Тем в WordPress.

Чтобы изменить любой макет, все что вам нужно сделать — это щелкнуть по  Edit With Visual Composer. И вы сможете редактировать настройки для элементов, которые уже есть, изменять колонки макета, заменять элементы, на те которые больше подходят вашему сайту.

Топовые статьи :  Stardock DeskScapes — анимированные обои для Windows Vista

Возможности:

Расширения:

– это, пожалуй, самое ценное, что есть у данного фреймворка. Это и есть тот самый знаменитый конструктор, на базе сетки Bootstrap. Вы сможете с лёгкостью создавать бесчисленное количество страниц с функцией перетаскивания в Visual Page Builder, который содержит множество готовых шорткодов. Конечно же, есть возможность их кастомизировать и создавать новые. На мой взгляд, недостаток заключается в том, что приходится работать в рамках классов и параметров сетки Bootstrap, но можно кастомизировать. Ну а если я использую другой front end framework, например, мой любимый UIKit3? Тогда придется думать и искать оптимальные решения

А если выходит так, что нужно ставить дополнительные плагины, у которых своя сетка? И возможность кастомизации вообще не заложена? Тогда будет сборная солянка и костыли… Тем не менее, при правильном подходе, расширение Page Builder – это находка! Ещё раз, важно всё делать с головой!

– добавляет в редактор страниц шорткоды, которые легко использовать в своих публикациях, очень легко кастомизировать существующие и добавлять свои.

– решение на базе Unyson, всё в переделах одного плагина! Так же легко кастомизировать! Я именно его использую.

– очень полезное расширение! Позволяет создавать в разделе «Виджеты» новые области для вывода виджетов на сайт, минуя ковыряние в файле functions.php, чудесно, да?

– это расширение позволяет создавать график автоматизированного резервного копирования, импортировать демо-контент или даже создавать архивы с демо-контентом с целью переноса на другой домен. Достаточно интересное расширение, хоть и не так часто используемое… Но, как говорится, есть не просит, ресурсов сервера в отключенном состоянии не расходует.

– даёт возможность вписывать у публикации title, description и менять url страницы

Конечно, это не Yoast SEO, но тем не менее нужные задачи решаются! Без дополнительных плагинов.

– добавляет слайдеры к вашему веб-сайту. Хоть они нынче не не так популярны, но при правильном использовании могут решить многие задачи, опять же, всё в пределах одного плагина!

– это расширение добавляет полноценное портфолио, которое позволяет выводить ваши материалы, используя созданные в разделе «портфолио» страницы. Его приходится, как правило, всегда кастомизировать и допиливать под свои нужды, лично меня по дефолту оно не устраивает! Но опять же, крайне полезная возможность!

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

– дает вам возможность добавить Google Analytics код отслеживания и получать всю аналитику о посетителях, просмотре страниц и т.д.

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

– используется для настройки всех ключей API социальных сетей. Другие расширения смогут использовать расширение Социальные сети для подключения к своим социальным аккаунтам.

– это расширение позволяет переводить текстовую информацию на любой язык или даже добавлять несколько языков в front end сайта.


Некий аналог Page Builder, как говорит его описание позволяет создавать страницы в реальном времени и управлять ими. Не требуется никаких навыков веб-дизайнера или ве-разработчика. Всё выполняется с помощью кликами и перетаскиванием. Видимо это очень круто! Но только он пока не работает… Подождём обновлений от Unyson.

Эти расширения Unyson решают большинство «врождённых» недостатков WordPress, они легко кастомизируются, и это все в одном плагине, с минимальной нагрузкой на сервер.

Плагин для создания дочерних тем WordPress Child Theme Configuration

эластичном&rdquo

Создавая дочернюю тему при помощи плагина Child Theme Configuration, мы не только упрощаем себе создание дочерней темы, но и еще получаем возможность сохранения настроек родительской темы и еще ряд дополнительных настроек.

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

Нажимаем на эту ссылку и у нас открывается стандартный WordPress предпросмотр. Здесь мы можем убедиться что всё корректно работает и активировать тему.
Так же после создания эта дочерняя тема будет отображаться в разделе «Внешний вид» → «Темы».

Вот так вот просто создается дочерняя тема.

Создание списка форматов

Самым простым способом добавить свои стили форматирования в TinyMCE это создание списка форматов. Каждый элемент из списка будет зависеть от стилей, которые прописаны в специальном CSS-файле .

Создадим файл  в корне темы и наполним его стилями, которые будут отображаться в окне редактора при форматировании.

editor-style.css

CSS

/*Синяя рамка для текста*/
.blue-frame{
  background: lightblue;
  color: white;
  border: 2px solid blue;
  border-radius: 5px;
}
/*Подчеркивание с тире*/
a.dashed-border{
  border-bottom: 1px dashed black;
}

1
2
3
4
5
6
7
8
9
10
11

/*Синяя рамка для текста*/

.blue-frame{

backgroundlightblue;

colorwhite;

border2pxsolidblue;

border-radius5px;

}
/*Подчеркивание с тире*/

a.dashed-border{

border-bottom1pxdashedblack;

}

Не забудьте указать эти же стили и в файле , иначе на сайте они не отобразятся.

Далее в файле определим элементы, из которых будет состоять список форматов.

functions.php

PHP

/***********************************/
/* CUSTOM TINYMCE FORMATS */
/***********************************/
// Включаем отображение списка форматов в панели инструментов TinyMCE
add_filter( ‘mce_buttons_2’, function ( $format_buttons ) {
array_unshift( $format_buttons, ‘styleselect’ );
return $format_buttons;
});

Топовые статьи :  Как создать свой домашний Mac-сервер

// Настраиваем элементы списка форматов
function tinymce_before_init_insert_formats( $init_array ) {
// Определяем элементы списка
$style_formats=array(
// Для каждого элемента создается свой массив с параметрами
array(
‘title’ => ‘Blue Frame’, // Имя формата
‘block’ => ‘div’, // HTML тег, в который будут обернуты данные (block/inline)
‘classes’ => ‘blue-frame’, // CSS-класс, стилизующий формат
‘wrapper’ => true, // Элемент будет оборачивать другие стили
),
array(
‘title’ => ‘Dash Underline’,
‘inline’ => ‘a’,
‘attributes’ => [
‘href’ => ‘http://meliorem.ru’,
‘target’ => ‘_blank’,
],
‘classes’ => ‘dashed-border’,
‘wrapper’ => false,
),
// Дополнительный стиль, который будет задан через атрибут style
array(
‘title’ => ‘Code’,
‘inline’ => ‘code’,
‘styles’ => ,
‘wrapper’ => false,
),
);

$init_array = json_encode( $style_formats );
return $init_array;
}
add_filter( ‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’ );

//Подключаем файл со стилями
function tinymce_add_editor_styles() {
add_editor_style( ‘editor-style.css’ );
}
add_action( ‘init’, ‘tinymce_add_editor_styles’ );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/***********************************/
/*     CUSTOM TINYMCE FORMATS      */
/***********************************/
// Включаем отображение списка форматов в панели инструментов TinyMCE

add_filter(‘mce_buttons_2’,function($format_buttons){

array_unshift($format_buttons,’styleselect’);

return$format_buttons;

});

 
// Настраиваем элементы списка форматов

functiontinymce_before_init_insert_formats($init_array){

// Определяем элементы списка

$style_formats=array(

// Для каждого элемента создается свой массив с параметрами

array(

‘title’=>’Blue Frame’,// Имя формата

‘block’=>’div’,// HTML тег, в который будут обернуты данные (block/inline)

‘classes’=>’blue-frame’,// CSS-класс, стилизующий формат

‘wrapper’=>true,// Элемент будет оборачивать другие стили

),

array(

‘title’=>’Dash Underline’,

‘inline’=>’a’,

‘attributes’=>

‘href’=>’http://meliorem.ru’,

‘target’=>’_blank’,

,

‘classes’=>’dashed-border’,

‘wrapper’=>false,

),

// Дополнительный стиль, который будет задан через атрибут style

array(

‘title’=>’Code’,

‘inline’=>’code’,

‘styles’=>

           ‘padding’=>’2px 4px’,

           ‘background-color’=>’#333’,

           ‘color’=>’#eee’,

       ,

‘wrapper’=>false,

),

);

$init_array’style_formats’=json_encode($style_formats);

return$init_array;

}

add_filter(‘tiny_mce_before_init’,’my_mce_before_init_insert_formats’);

 
//Подключаем файл со стилями

functiontinymce_add_editor_styles(){

add_editor_style(‘editor-style.css’);

}

add_action(‘init’,’tinymce_add_editor_styles’);

Теперь зайдите в редактор TinyMCE и вы увидите кнопку выпадающего списка — «Форматы», в котором будут определенные ранее стили форматирования.

Форматы на панели инструментов TinyMCE

Если вы используете плагин TinyMCE Advanced, то по умолчанию в форматах будут отображаться его элементы. Чтобы вернуть свои форматы вам нужно отметить галочку в поле «Создание меню классов CSS» в настройках плагина.

Функции для копирования дополнительных файлов дочерней темы

По умолчанию при создании дочерней темы плагин создает всего два файла, файл с таблицей стиле style.css и файл функций functions.php. Если же нам необходимо внести изменения в верхнюю часть сайта, за которую отвечает шаблон header.php, или в нижнюю часть сайт, подключить каких-то скрипты, добавить определенные блоки, то нам помимо этих двух файлов нужно будет скопировать еще некоторые файлы родительской темы, и уже потом вносить в них изменения.

Для этого:

  1. 1.Возвращаемся на страницу настроек плагина, и здесь нам нужно будет перейти на вкладку «Files». В перечне всех файлов родительской темы, мы при помощи галочек можем отмечать те файлы, которые нам нужны.

  2. 2.После того как вы все это отметили, нажимаем на кнопку «Copy Selected to Child Theme».
  3. 3.Теперь мы можем вносить изменения в файлы дочерней темы при помощи стандартного встроенного редактора WordPress или подключившись к сайт по FTP.

Если вы ещё не знаете как это делается то вам поможет эта статья: «Редактирование файлов сайта в Notepad++»

Так же на странице настроек данного плагина мы можем удалять те файлы, которые у нас не используются. Для этого в блоке «Child Theme Files» нам достаточно просто галочкой отметить те файлы, которые нам не нужны и нажать на кнопку «Delete Selected».

эластичном&rdquo

Так же на этой вкладке вы можете выполнять загрузку дополнительных изображений, которые будут загружаться в папку images нашей дочерней темы. Вам не нужно подключаться к сайту по FTP или через веб-интерфейс вашего хостинга. Вы можете все это делать через админку WordPress, что тоже очень удобно.

Просто нажимаем на кнопку обзор, выбираем то изображение, которое нас интересует, а затем просто нажимаем на кнопку «Upload».

Для удаления ненужных изображений просто ставим возле него галочку, и нажимаем на кнопку «Delete Selected»

эластичном&rdquo

Далее, на этой же вкладке мы можем изменить скриншот темы, который отображается в разделе «Внешний вид» → «Темы».

эластичном&rdquo

Еще одна интересная возможность — это возможность экспорта zip-архива с файлами вашей дочерней темы. Вы можете внести изменения, затем нажать на кнопку «Export Child Theme», скачать архив и хранить его на компьютере в качестве резервной копии, либо же импортировать ее на другие сайты и использовать там.

Как видите настроек у этого плагина очень много, но это еще далеко не все. Давайте коротко пробежимся по остальным вкладкам, чтобы узнать о его дополнительных возможностях.

Оцените статью
Добавить комментарий