Coma Web Development разрабатывает сайты на WordPress c 2010 года. В блоге мы делимся некоторыми наблюдениями из жизни, советами и рекомендациями для тех, кто решит сделать сайт на WordPress самостоятельно.

pexels-photo-54257

Как установить WordPress – полноценный урок установки WordPress

/от

WordPress известен как самая популярная блог-платформа и система управления контентом. Новые пользователи часто бывают удивлены, когда узнают, что WordPress также славится легкой установкой. Все лучшие веб-хостинговые компании WordPress позволяют вам установить WordPress всего за несколько кликов. В большинстве случаев, установка WordPress – это нехитрый процесс, который занимает меньше пяти минут. В этом уроке нашей целью будет предоставить всеобъемлющую инструкцию по установке WordPress как для начинающих, так и для продвинутых пользователей. Мы покажем новичкам, как установить WordPress с использованием Softaculous. Мы объясним более продвинутым пользователям, как установить WordPress мануально. И, наконец, начинающим разработчикам и дизайнерам мы покажем, как установить WordPress на локальный компьютер (Windows, Mac и Linux).

howtoinstallwp

Что понадобится, прежде чем установить WordPress

Прежде чем установить WordPress, вам нужен домен и хорошая веб-хостинговая компания, знакомая с WordPress.

Так как это достаточно длинный урок, используйте ссылки ниже, чтобы попасть в нужный вам раздел:

Как установить WordPress, используя Softaculous

Softaculous – это популярный инсталляционный скрипт. Он позволяет легко установить такие популярные веб-приложения, как WordPress, всего за несколько кликов. Хостинговые компании SiteGround и InMotion Hosting используют Softaculous в своей панели управления.

Войдите в cPanel вашего аккаунта и найдите иконку Softaculous или иконку инсталлятора WordPress. Они обычно находятся в разделе «Software».

Как установить WordPress – полноценный урок установки WordPress 1

Нажав на одну из этих иконок, вы запустите авто-инсталлятор Softaculous. Сначала вы увидите обзор WordPress. Вам потребуется нажать на вкладку «Install», чтобы продолжить.

Как установить WordPress – полноценный урок установки WordPress 2

Softaculous спросит вас, куда вы хотите установить WordPress. Выберите протокол http:// или http://www.

Если ваш сайт использует SSL и HTTPS, то вы можете выбрать протокол https:// или https://www.

Затем вам надо выбрать имя домена, на который вы хотите установить WordPress. Большинство пользователей устанавливают WordPress в корневую директорию своего домена, например example.com. В этом случае оставьте поле «In Directory» пустым.

Промотайте вниз, и увидите раздел настроек сайта.

Как установить WordPress – полноценный урок установки WordPress 3

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

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

Если хотите, можете их поменять, чтобы точно запомнить. Однако мы настоятельно рекомендуем всегда использовать надежный пароль. Читайте нашу инструкцию: лучший способ управлять паролями для WordPress для начинающих, чтобы узнать, как легко справиться со сложными паролями.

Убедитесь, что вы ввели правильный имейл. Именно на него WordPress будет отсылать уведомления и ссылку на восстановление пароля, если вы его забудете.

Остальные настройки не обязательные. Вы можете нажать кнопку «Install», чтобы запустить установку.

Softaculous начнет установку, используя предоставленные вами настройки. Вы увидите шкалу загрузки. Установка займет несколько минут; не закрывайте окно, пока шкала не достигнет 100%, иначе вы можете помешать установке WordPress.

softaclous-wpinstallprogress

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

Как установить WordPress, используя FTP

Мануальная установка WordPress известна также как 5-минутная установка. Однако мануальная установка имеет несколько дополнительных шагов, и для нее вам понадобится FTP-клиент. Читайте наш урок для новичков о том, как использовать FTP для загрузки файлов WordPress.

Первым делом вам надо скачать последнюю версию WordPress. Распакуйте файл и используйте FTP, чтобы закачать файлы в вашу веб-хостинговую директорию.

uploadwpfiles

Если вы хотите установить WordPress на имя корневого домена (example.com), то вам нужно загрузить файлы WordPress в корневую директорию вашего сайта. Обычно эта директория называется /public_html/.

С другой стороны, если вы хотите установить WordPress во вложенную папку (example.com/blog), тогда загрузите их в папку /public_html/blog/.

Когда вы закончили загружать WordPress, пройдите в панель управления вашего хостинга, чтобы создать базу данных. Мы используем веб-хостинг cPanel. В своей cPanel найдите раздел «Databases» и кликните на «Database Wizard»:

Вы увидите поле для создания новой базы данных. Введите имя вашей базы данных, и нажмите «Next Step».

newdb

Теперь, когда вы создали базу данных, потребуется имя пользователя для MySQL. Это имя пользователя будет иметь доступ к любым операциям в базе данных. Введите имя пользователя и пароль для нового пользователя, а затем нажмите кнопку «Create User».

mysqluser

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

Вас спросят, какие привилегии вы хотите позволить данному пользователю. Отметьте «ALL PRIVILEGES» и нажмите кнопку «Make changes».

addusertodb

Теперь ваша база данных и пользователь MySQL готовы, и пришло время запустить установку WordPress. Пройдите по URL адресу, на который вы скачали WordPress. Если он находится на основном домене, то введите ваш домен в браузерном окне, например yoursite.com или www.yoursite.com.

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

wpinstall-language

Нажмите на кнопку «Continue».

Вы увидите установочные инструкции. Теперь WordPress понадобятся ваше название базы данных, пароль и информация mysql.

wpinstall-setupinstructions

Нажмите кнопку «Let’s go», чтобы продолжить.

Теперь WordPress покажет вам форму. Здесь нужно ввести имя базы данных, которую вы создали.

wpinstall-dbsettings

Заполните информацию, а затем нажмите кнопку “Submit”. WordPress подключится к вашей базе данных и покажет сообщение об успешном соединении.

wpdbconnected

Нажмите «Run the Install», чтобы продолжить.

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

Теперь вам надо ввести информацию, требующуюся для настройки вашего сайта WordPress: название, имя пользователя, пароль и имейл администратора.

Если вы не хотите, чтобы ваш сайт был доступен поисковым системам, вы можете поставить галочку рядом с “search engine visibility”. Позже, когда вы будете готовы, вы сможете поменять эту настройку. Если вы не уверены, оставьте все как есть.

wpsitesettings

Нажмите на кнопку «Install WordPress», чтобы продолжить. WordPress внесет нужные настройки и завершит установку.

Вы увидите сообщение об успешном завершении, где будет видно ваше имя пользователя. Можете нажать на кнопку «Log in», чтобы попасть на свой сайт WordPress.

wpinstallsuccess

Как установить WordPress на ваш компьютер

Многие начинающие пользователи WordPress спрашивают, можно ли установить его на свой компьютер? Да, можно, но большинству новичков лучше этого не делать.

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

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

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

Тем не менее, если вы действительно хотите установить WordPress на свой компьютер, чтобы узнать больше о разработке тем, протестировать плагины и т.д., то мы вам очень советуем это сделать. Если вы используете Windows, мы рекомендуем скачать и установить WAMP. Если вы используете Mac, вам понадобится скачать и установить Mamp.

У нас также есть урок, рассказывающий о том, как перенести WordPress с локального сервиса на онлайн сайт.

Как установить WordPress на вашем языке

Так же как и Windows, Mac, iPhone и Android, вы можете использовать WordPress на своем языке.

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

Вы можете выбрать язык во время установки WordPress или поменять его, пройдя на страницу Settings > General в разделе администратора WordPress.

selectlanguagewp

Вы можете даже сделать сайт WordPress на нескольких языках сразу.

Мы сделали урок, рассказывающий как установить WordPress на другом языке.

Как установить WordPress Multisite Network

Функция multisite уже встроена в WordPress. Система multisite позволяет вам создать несколько сайтов WordPress за одну установку. Она может автоматически создать новые сайты в под-доменах или вложенных папках.

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

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

Что делать после установки WordPress

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

Выберите тему

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

Мы регулярно публикуем списки тем для WordPress в категории Showcase.

Установите и начните пользоваться плагинами

Настоящее преимущество WordPress заключается в огромном выборе плагинов. Плагины позволяют вам расширять ваш сайт с помощью новых функций и особенностей.

Существует более 40000 только бесплатных плагинов, доступных в директории плагинов на WordPress. Еще больше плагинов можно найти на платных сайтах других компаний.

Если вы не уверены, какие плагины установить, загляните в нашу категорию Плагины.

У нас также есть пошаговая инструкция установления плагинов для WordPress.

Начните изучать WordPress

WordPress является самой легкой в использовании CMS на нынешнем рынке. Миллионы людей во всем мире используют его каждый день. Однако время от времени вам может понадобиться помощь.

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

Узнайте, как полноценно использовать бесплатные ресурсы.

Заключение

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

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

post categories

Что такое таксономия

/от

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

У вас также есть возможность использовать самодельные таксономии для создания своих групп, чтобы подвести их под одну гребёнку. Например, у вас есть самодельный тип поста, названный Книги. И хотя вы можете использовать категории, возможно вы не захотите смешивать эти две вещи, так как они используются по разному. Вы можете зарегистрировать новую таксономию под названием Жанры, и добавить в неё такие понятия как Приключения, Романы, Научная литература и так далее. Это позволит вам и вашим пользователям отсортировать книги по жанру. Таксономии так же могут быть иерархическими, так вы можете иметь главные жанры: Фантастика, Документальные и Детский. И каждый из них имеет поджанр, например фантастика может иметь поджанр Триллер.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

Что такое короткий код

Что такое короткий код

/от

Короткие коды в WordPress это небольшие кусочки кода, которые могут делать многое при минимальных усилиях. Они были представлены в WordPress 2.5 и причина их появления была дать людям возможность выполнять код внутри постов, страниц и виджетов без написания какого-либо кода напрямую. Это позволяет встроить одной строкой файлы или создать объекты, которые потребовали бы огромный код. Например, для встраивания видео код может выглядеть так:

[[video]]

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

[[video src="video-source.mp4"]]

В самой системе довольно немало встроенных кодов. Это аудио, встраивание, галерея и видео. Другие плагины могут быть добавлены через Shortcode API.

Иногда вам нужно использовать текст короткого кода в посте. Чтобы сделать это, вам нужно использовать двойные скобки. Например, если вы хотите отобразить сам короткий код видео, а не само видео, нужно сделать так:

[[video]]

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

 

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

html-css

Что такое CSS

/от

CSS или же каскадные таблицы стилей это язык стилей, используемый. чтобы задать визуальное оформление и форматирование HTML документов. Темы WordPress используют CSS и HTML, чтобы выдавать данные, сгененрированные WordPress. Каждая тема WordPress содержит файл style.css , который содержит правила и стили, задающие форматирование страниц на WordPress.

CSS крайне прост в использовании и его легко выучить. Существует много веб-сайтов, которые публикуют учебные материалы по CSS для новичков, это может помочь пользователям WordPress в самом начале. И хотя его просто использовать, многие пользователи WordPress могут понять основы, просто взглянув на файл темы WordPress  style.css .

Пример:

body { 
font-size:14px;
color: #444;
background-color:#FFFFFF; 
} 

h1 { 
font-size:18px;
text-transform:uppercase;
}

.post-title { 
font-size: 16px; 
color: #4C0000;
font-weight:normal;
}

Элементам HTML может быть задан стиль прямо в CSS. Дизайнеры также используют идентификаторы и классы, чтобы задать параметры различным разделам в CSS. Это также помогает им использовать разные стили для одного элемента HTML на странице, но в разных разделах. Например, элемент h1  для заголовка блога может быть оформлен по другому, чем элемент  h1  для области постов на той же странице.

Пример:

<div id="header">

<h1 class="blog-title">
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
</h1>

</div>

Показанный выше HTML содержит идентификатор ‘header’  и класс ‘blog-title’. Эти разделы могут быть застилизованы CSS.

Пример:

#header { 
background-color:#4C0000;
height:120px;
width:100%;
padding:20px; 
} 

h1.blog-title a { 
font-color:#FFFFFF; 
font-size:16px;
font-family: Georgia, "Times New Roman", serif; 
text-decoration:none;
}

 

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

javscript-1

Как правильно добавить скрипты и стили в WordPress

/от

Недавно мы рассматривали код для одного из плагинов, что прислал один из наших пользователей. Плагин работал отлично, но разработчик не учёл некоторых аспектов при загрузке с внешних источников JavaScript. WordPress имеет систему очереди для добавки внешних скриптов и стилей, что помогает предотвратить конфликты плагинов. Так как большинство держит более одного плагина на своём сайте, то будет полезным прочитать данную статью. Мы покажем вам, когда правильно добавлять JavaScript и стили в WordPress. Это будет крайне полезно всем, кто начал осваивать разработку плагинов и тем для WordPress.

Ошибка

У WordPress есть функция wp_head , которая позволяет загрузить что угодно в шапку вашего сайта. Для добавления своих скриптов, многие используют данный код:

&amp;amp;lt;?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?&amp;amp;gt;

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

Давайте посмотрим, как нужно делать.

Зачем ставить скрипты в очередь?

У WordPress имеет большое сообщество разработчиков. Тысячи людей по всему миру придумывают темы и пишут плагины для WordPress. Чтобы убедиться, что всё работает верно и никто не наступает друг другу на ногу, WordPress имеет специальную функцию очереди для скриптом. Функция предоставляет систематическую загрузку JavaScript и стилей. Используя функцию  wp_enqueue_script ,  вы говорите WordPress когда нужно грузить скрипт, где грузить и при каких условиях.

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

Как правильно вставить скрипты в очередь в WordPress

Правильная загрузка скриптов в WordPress крайне проста. Внизу дан пример, который вы можете скопировать в файл плагина или в файл темы functions.php , чтобы правильно загружать скрипты в WordPress.

&amp;amp;lt;?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?&amp;amp;gt;

Пояснение:

Мы начали регистрацию нашего скрипта через функцию wp_register_script(). Данная функция принимает 5 параметров:

  • $handle – Удерживать уникальное имя вашего скрипта. Мы назвали наш скрипт “my_amazing_script”
  • $src – src это местоположение вашего скрипта. Мы используем функцию plugins_url чтобы получить правильный URL папки нашего плагина. Как только WordPress найдёт его, он также найдёт скрипт с названием amazing_script.js в этой папке.
  • $deps – deps это для зависимостей. Так как наш скрипт использует jQuery, то мы добавили jQuery в область зависимостей. WordPress автоматически загрузит jQuery, если он ещё не был загружен.
  • $ver – Это номер версии нашего скрипта. Параметр необязателен.
  • $in_footer – Мы хотим загрузить наш скрипт в нижний колонтитул, потому нам надо поставить это значение на true. Если вы хотите загрузить скрипт в шапку, то поставьте false.

После расставления всех параметрво в wp_register_script, вы можете просто вызвать скрипт, который всё сделает: wp_enqueue_script()

Некоторые особо любознательные могут спросить, почему мы сначала зарегистрировали скрипт, а потом поставили в очередь? Это позволяет другим владельцам сайта снять с регистрации ваш скрипт.

Как правильно поставить в очередь стили

Так же как и скрипты, вы можете поставить в очередь свои стили. Посмотрите на пример:

&amp;amp;lt;?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?&amp;amp;gt;

Заметьте, что мы использовали один и тот же приём wp_enqueue_scripts , чтобы подцеплять и скрипты и стили. Несмотря на имя, функция работает для них обоих.

В примерах выше мы использовали plugins_url для уточнения местоположения скрипта или стиля, который мы хотим поставить в очередь. Однако, если вы используете функцию для очередей в вашей теме, то используйте get_template_directory_uri(). Если вы работаете с дочерней темой, то используйтеget_stylesheet_directory_uri(). Вот пример:

&amp;amp;lt;?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?&amp;amp;gt;

Мы надеемся эта статья помогла вам научиться правильно добавлять JavaScript и стили в темы и плагины WordPress. Для вопросов и комментариев пишите нам в комментарии.

Дополнительные ресурсы:

 

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

pexels-photo

Что такое GPL

/от

GPL или General Public Licence, которую также называют GNU GPL, – самая часто используемая лицензия для свободного ПО. Она была составлена Ричардом Столманом из Free Software Foundation для проекта GNU. Эта лицензия позволяет любому свободно использовать, модифицировать и распространять ПО. WordPress также был выпущен под лицензией GPL, что делает WordPress программой open source, которая может использоваться, модифицироваться и расширяться кем угодно.

Проект WordPress считает лицензию GPL своим идеологическим эквивалентом билля о правах. Она воплощает основные ценности этого проекта.

  • Каждый может скачивать и использовать ПО
  • Каждый может модифицировать ПО
  • Каждый может распространять бесплатные копии ПО
  • Каждый может распространять модифицированные версии ПО.

Одним из главных аспектов GPL является использование copyleft. Copyleft – это игра слов, произошедшая от слова copyright (авторское право). По сути, используется закон об авторском праве, чтобы защитить модифицированные версии продукта, но при этом он требует наложения таких же прав на последующие версии. Именно поэтому любой продукт, основанный на WordPress, наследует лицензию GPL. Это вызвало некоторые разногласия, так как нашлись компании и люди, пытавшиеся продавать темы и плагины для WordPress под несоответствующими лицензиями. Однако в сообществе WordPress всеми силами пытаются защищать этот билль о правах. Соучредитель проекта WordPress Мэтт Малленвег активно об этом высказывается.

Читайте также

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

tabs

Как добавить виджет с закладками в WordPress

/от

Думаю все из вас видели область с закладками на популярных сайтах, что позволяет увидеть самые популярные, недавние и важные посты в один клик? Такая вещь называется виджетом закладок и она позволяет сохранить место на экране пользователя, комбинируя разные виджеты в один. В этой статье мы покажем вам, как добавить виджет закладок на jQuery в WordPress.

WordPress

Зачем вам нужен виджет закладок?

Когда вы работаете с сайтом WordPress, вы можете с лёгкостью добавлять элементы на вашу боковую панель, чтобы перенести туда виджеты. По мере роста сайта, вам может показаться, что у вас недостаточно места на боковой панели, чтобы показать весь полезный контент. В этот момент, закладки могут спасти ситуацию. Они позволяют показывать различные элементы в одной области. Пользователь может кликнуть на каждую закладку и увидеть ту информацию, что ему более интересна. Большинство сайтов используют виджет для показа статей за сегодня, за неделю или за месяц. В этой статье мы покажем вам, как создать виджет закладки.

Создание виджета закладок в WordPress

Давайте начнём. Первым делом нужно создать папку на рабочем столе и назвать её wpbeginner-tabber-widget. После этого, нужно создать три файла внутри папки с помощью блокнота. Назовите первый файл  wpb-tabber-widget.php.  Он будет содержать HTML и PHP код для создания закладок. Назовите второй файл wpb-tabber-style.css, он будет содержать CSS стили для контейнера закладок. Назовите третий файл wpb-tabber.js, он будет содержать скрипты на jQuery для переключения закладок и добавления анимации.

Начнём с файла wpb-tabber-widget.php . Его цель — создать плагин, который зарегистрирует виджет. Если вы ещё никогда не создавали свои виджеты, то можете прочитать о том, как сделать свой виджет на WordPress или же просто скопируйте данный код в файл wpb-tabber-widget.php:

&amp;lt;?php /* Plugin Name: WPBeginner jQuery Tabber Widget Plugin URI: https://www.wpbeginner.com/ Description: A simple jquery tabber widget. Version: 1.0 Author: WPBeginner Author URI: https://www.wpbeginner.com/ License: GPL2 */ // creating a widget class WPBTabberWidget extends WP_Widget { function WPBTabberWidget() { $widget_ops = array( 'classname' =&amp;gt; 'WPBTabberWidget',
		'description' =&amp;gt; 'Simple jQuery Tabber Widget'
);
$this-&amp;gt;WP_Widget(
		'WPBTabberWidget',
		'WPBeginner Tabber Widget',
		$widget_ops
);
}
function widget($args, $instance) { // widget sidebar output

function wpb_tabber() { 

// Now we enqueue our stylesheet and jQuery script

wp_register_style('wpb-tabber-style', plugins_url('wpb-tabber-style.css', __FILE__));
wp_register_script('wpb-tabber-widget-js', plugins_url('wpb-tabber.js', __FILE__), array('jquery'));
wp_enqueue_style('wpb-tabber-style');
wp_enqueue_script('wpb-tabber-widget-js');

// Creating tabs you will be adding you own code inside each tab
?&amp;gt;


&amp;lt;ul class=&amp;quot;tabs&amp;quot;&amp;gt;

&amp;lt;li class=&amp;quot;active&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#tab1&amp;quot;&amp;gt;Tab 1&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;


&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;#tab2&amp;quot;&amp;gt;Tab 2&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;


&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;#tab3&amp;quot;&amp;gt;Tab 3&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;

&amp;lt;/ul&amp;gt;



&amp;lt;div class=&amp;quot;tab_container&amp;quot;&amp;gt;


&amp;lt;div id=&amp;quot;tab1&amp;quot; class=&amp;quot;tab_content&amp;quot;&amp;gt;
&amp;lt;?php // Enter code for tab 1 here. ?&amp;gt;
&amp;lt;/div&amp;gt;



&amp;lt;div id=&amp;quot;tab2&amp;quot; class=&amp;quot;tab_content&amp;quot; style=&amp;quot;display:none;&amp;quot;&amp;gt;
&amp;lt;?php // Enter code for tab 2 here. ?&amp;gt;
&amp;lt;/div&amp;gt;



&amp;lt;div id=&amp;quot;tab3&amp;quot; class=&amp;quot;tab_content&amp;quot; style=&amp;quot;display:none;&amp;quot;&amp;gt;
&amp;lt;?php // Enter code for tab 3 here. ?&amp;gt;
&amp;lt;/div&amp;gt;


&amp;lt;/div&amp;gt;



&amp;lt;div class=&amp;quot;tab-clear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;


&amp;lt;?php 
}

extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget; 
$tabs = wpb_tabber(); 
// output tabs HTML
echo $tabs; 
// post-widget code from theme
echo $after_widget; 
}
}

// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget(&amp;quot;WPBTabberWidget&amp;quot;);')
);
?&amp;gt;

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

Следующим шагом будет добавление jQuery для их корректного отображения. Вставьте данный код в файлwp-tabber.js .

(function($)  {
$(&amp;quot;.tab_content&amp;quot;).hide();
$(&amp;quot;ul.tabs li:first&amp;quot;).addClass(&amp;quot;active&amp;quot;).show();
$(&amp;quot;.tab_content:first&amp;quot;).show();
$(&amp;quot;ul.tabs li&amp;quot;).click(function() {
$(&amp;quot;ul.tabs li&amp;quot;).removeClass(&amp;quot;active&amp;quot;);
$(this).addClass(&amp;quot;active&amp;quot;);
$(&amp;quot;.tab_content&amp;quot;).hide();
var activeTab = $(this).find(&amp;quot;a&amp;quot;).attr(&amp;quot;href&amp;quot;);
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
else {$(activeTab).fadeIn();}
return false;
});
})(jQuery);

Теперь наш виджет оснащён кодом jQuery, следующим шагом будет добавление стилей к закладкам. Мы создали простые стили, вы можете их скопировать в файлwpb-tabber-style.css:

ul.tabs { 
position: relative; 
z-index: 1000; 
float: left; 
border-left: 1px solid #C3D4EA; 
}
ul.tabs li {
position: relative; 
overflow: hidden; 
height: 26px; 
float: left; 
margin: 0; 
padding: 0; 
line-height: 26px; 
background-color: #99B2B7;
border: 1px solid #C3D4EA; 
border-left: none; 
}
ul.tabs li  a{ 
display: block; 
padding: 0 10px; 
outline: none; 
text-decoration: none;
}
html ul.tabs li.active, 
html ul.tabs li.active a:hover { 
background-color: #D5DED9; 
border-bottom: 1px solid #D5DED9; 
}
.widget-area .widget .tabs a  { 
color: #FFFFFF; 
}
.tab_container {
position: relative; 
top: -1px; 
z-index: 999; 
width: 100%; 
float: left; 
font-size: 11px; 
background-color: #D5DED9; 
border: 1px solid #C3D4EA;
}
.tab_content { 
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul { 
margin: 0;
padding: 0; 
list-style: none; 
}
.tab_content li { 
margin: 3px 0;
 }
.tab-clear {
clear:both;
}

Вот и всё, теперь загрузите папку wpbeginner-tabber-widget на ваш сайт WordPress в папку  /wp-content/plugins/ через FTP. Или же вы можете сжать вашу папку в ZIP архив и загрузить архива через панель администратора:  Plugins » Add New. Нажмите на закладку загрузок, чтобы установить плагин. Как только плагин будет активирован, перейдите в Appearance » Widgets, и переместите виджет закладок на вашу боковую панель.

WordPress

 

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

Dart Widgets

Как сделать FAQ в виде гармошки в WordPress

/от

Недавно один из наших пользователей спросил нас, можно ли создать раздел с часто задаваемыми вопросами в виде раскрывающейся гармошки на WordPress. Существует множество плагинов, который позволяют добавить раздел FAQ в WordPress. В этой статье, мы покажем вам, как создать FAQ гармошку на jQuery на вашем WordPress сайте.

Что за гармошка?

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

WordPress

Добавление FAQ гармошки на jQuery

Перед тем как добавлять гармошку для ЧЗВ, убедитесь, что у вас есть готовый раздел с ЧЗВ. Можете прочитать наше пособие, как добавить раздел FAQ в WordPress.

Что ж, давайте начнём создавать гармошку. WordPress идёт вкупе с библиотекой jQuery, однако тем для jQuery у него нет. Мы загрузим их с Google CDN и вставим скрипты в WordPress. Мы также создадим короткий код, который будет показывать наши ЧЗВ.

Создайте папку на вашем рабочем столе и назовите её my-accordion. Откройте блокнот и создайте файл my-accordion.php и вставьте данный код в него:

&lt;?php

function accordion_shortcode() { 

// Registering the scripts and style
wp_register_style('wpb-jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css', false, null);
wp_enqueue_style('wpb-jquery-ui-style');
wp_register_script('wpb-custom-js', plugins_url('/accordion.js', __FILE__ ), array('jquery-ui-accordion'), '', true);
wp_enqueue_script('wpb-custom-js');

// Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
$posts = get_posts(array(  
'posts_per_page' =&gt; 10,
'orderby' =&gt; 'menu_order',
'order' =&gt; 'ASC',
'post_type' =&gt; 'question',
));
	
// Generating Output 
$faq  .= '&lt;div id=&quot;accordion&quot;&gt;'; //Open the container
foreach ( $posts as $post ) { // Generate the markup for each Question
$faq .= sprintf(('&lt;h3&gt;&lt;a href=&quot;&quot;&gt;%1$s&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;%2$s&lt;/div&gt;'),
$post-&gt;post_title,
wpautop($post-&gt;post_content)
);
}
$faq .= '&lt;/div&gt;'; //Close the container
return $faq; //Return the HTML.
}
add_shortcode('faq_accordion', 'accordion_shortcode');

После сохранения изменений, создайте новый файл и назовите его accordion.js. Вставьте данный код и сохраните файл:

jQuery(document).ready(function() {
jQuery(&quot;#accordion&quot;).accordion();
})();

Теперь наш плагин готов к загрузке. Откройте свой FTP клиент и загрузите папку в директорию сайта /wp-contnt/plugins/. Теперь вам нужно активировать плагин в разделе Плагины в панели администратора.

Добавление страницы с ЧЗВ и гармошкой

Чтобы добавить FAQ в гармошку, нужно создать новую страницу — Pages » Add New. Дайте странице название и вставьте в редактор данный код:

[faq_accordion]

Сохраните и опубликуйте страницу, и вы увидите ваш FAQ с красивым меню в стиле гармошки.

Изменение стиля и цвета гармошки

Для изменения стиля и цвета гармошки можно использовать jQuery UI темы. Вы можете скачать их и установить на свой сайт — на сайте jQuery есть целый раздел с jQuery UI темами. Как видно, мы использовали тему под названием Humanity в нашем плагине. Вы также можете создавать или изменять темы в Themeroller.

WordPress

Надеемся эта статья помогла вам разобраться в том, как добавить FAQ в виде гармошки на сайте WordPress.

 

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

ftp

Что такое FTP

/от

FTP или протокол передачи файлов это интернет протокол, который используют для передачи файлов через интернет. Например, если вы устанавливаете ПО на свой вебсайт (например WordPress), то скорее всего вы используете FTP для загрузки файлов со своего компьютера на сервер. Чтобы сделать это, вам понадобится FTP клиент. FTP клиент это программа, которая работает на вашем компьютере и позволяет переносить файлы с/на ваш веб сервер. Filezilla и WS_FTP являются хорошими примерами FTP клиентов.

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

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

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520