WordPress Туториалы

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

Регистрация боковых панелей и областей для виджетов в WordPress

Первым делом нужно зарегистрировать вашу боковую панель или область для виджетов в вашей теме. Мы можете зарегистрировать несколько таких. Скопируйте и вставьте код в файл вашей темы functions.php.

function wpb_widgets_init() {

	register_sidebar( array(
		'name' => __( 'Main Sidebar', 'wpb' ),
		'id' => 'sidebar-1',
		'description' => __( 'The main sidebar appears on the right on each page except the front page template', 'wpb' ),
		'before_widget' => '
<aside id="%1$s" class="widget %2$s">',
		'after_widget' => '</aside>

',
		'before_title' => '
<h3 class="widget-title">',
		'after_title' => '</h3>

',
	) );

	register_sidebar( array(
		'name' =>__( 'Front page sidebar', 'wpb'),
		'id' => 'sidebar-2',
		'description' => __( 'Appears on the static front page template', 'wpb' ),
		'before_widget' => '
<aside id="%1$s" class="widget %2$s">',
		'after_widget' => '</aside>

',
		'before_title' => '
<h3 class="widget-title">',
		'after_title' => '</h3>

',
	) );
	}

add_action( 'widgets_init', 'wpb_widgets_init' );

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

Добавление динамических боковых панелей для виджетов в файлы темы WordPress

Пока что мы лишь зарегистрировал динамические боковые панели. Пользователи могут перенести виджеты на эти боковые панели через Appearance » Widgets. Однако они не появятся на сайте, пока они называют в шаблоне как sidebar.php или по-другому. Чтобы их добавить, отредактируйте файл шаблона и вставьте этот код:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>

<div id="secondary" class="widget-area" role="complementary">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
	</div>

<?php endif; ?>

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

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

---

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

---

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

Помните, что вам необходимо понимать принципы работы WordPress, чтобы освоить данный материал.

Данный метод довольно прост: Зарегистрируйте пользовательский тип поста и назовите его Отзывы. Мы покажем следующую информацию: имя клиента, его позицию в компании, имя компании и ссылка на наше портфолио. Вместо использования пользовательских полей, мы решили добавить мета-области, чтобы сделать ввод информации более удобным. Также мы добавили эффекты появления и исчезновения на JavaScript для смены приветствий на самой странице.

Шаг 1: Зарегистрируйте пользовательский тип поста

Не будем вдаваться в подробности о том, как создавать пользовательский тип поста. Мы уже писали статью о том, как создавать пользовательские посты в WordPress. В данной статье вы сможете полностью понять весь процесс. Там также показывается метод с плагинами, а не метод с кодом. Если вы хотите назвать пользовательский пост «Отзывы», то всё что вам нужно — вставить данный код в файл темы functions.php.

add_action( 'init', 'wpb_register_cpt_testimonial' );

function wpb_register_cpt_testimonial() {

    $labels = array( 
        'name' => _x( 'Testimonials', 'testimonial' ),
        'singular_name' => _x( 'testimonial', 'testimonial' ),
        'add_new' => _x( 'Add New', 'testimonial' ),
        'add_new_item' => _x( 'Add New testimonial', 'testimonial' ),
        'edit_item' => _x( 'Edit testimonial', 'testimonial' ),
        'new_item' => _x( 'New testimonial', 'testimonial' ),
        'view_item' => _x( 'View testimonial', 'testimonial' ),
        'search_items' => _x( 'Search Testimonials', 'testimonial' ),
        'not_found' => _x( 'No testimonials found', 'testimonial' ),
        'not_found_in_trash' => _x( 'No testimonials found in Trash', 'testimonial' ),
        'parent_item_colon' => _x( 'Parent testimonial:', 'testimonial' ),
        'menu_name' => _x( 'Testimonials', 'testimonial' ),
    );

    $args = array( 
        'labels' => $labels,
        'hierarchical' => false,
        
        'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ),
        
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        
        
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );

    register_post_type( 'testimonial', $args );
}

Шаг 2: Добавление пользовательских мета-областей

Как мы уже говорили, вот информация, которую мы хотим показать:

• Имя
• Позиция в компании
• Имя компании
• Ссылка на портфолио

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

$key = "testimonial";
$meta_boxes = array(
"person-name" => array(
"name" => "person-name",
"title" => "Person's Name",
"description" => "Enter the name of the person who gave you the testimonial."),
"position" => array(
"name" => "position",
"title" => "Position in Company",
"description" => "Enter their position in their specific company."),
"company" => array(
"name" => "company",
"title" => "Company Name",
"description" => "Enter the client Company Name"),
"link" => array(
"name" => "link",
"title" => "Client Link",
"description" => "Enter the link to client's site, or you can enter the link to your portfolio page where you have the client displayed.")
);
 
function wpb_create_meta_box() {
global $key;
 
if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Information', 'display_meta_box', 'testimonial', 'normal', 'high' );
}
}
 
function display_meta_box() {
global $post, $meta_boxes, $key;
?>
 
<div class="form-wrap">
 
<?php
wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true );
 
foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>
 
<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo (isset($data[ $meta_box[ 'name' ] ]) ? htmlspecialchars( $data[ $meta_box[ 'name' ] ] ) : ''); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>
 
<?php } ?>
 
</div>
<?php
}
 
function wpb_save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;
 
foreach( $meta_boxes as $meta_box ) {
if (isset($_POST[ $meta_box[ 'name' ] ])) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}
}
 
if (!isset($_POST[ $key . '_wpnonce' ])) 
return $post_id;

if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;
 
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
 
update_post_meta( $post_id, $key, $data );
}
 
add_action( 'admin_menu', 'wpb_create_meta_box' );
add_action( 'save_post', 'wpb_save_meta_box' );

Теперь, если вы перейдёте в раздел New Testimonial, вы увидите, что у вас появится пользовательская мета-область.

Если вы хотите добавить дополнительные поля для мета-области, просто добавьте их в $meta_boxes = array(.

Шаг 3: Добавление меняющегося контента

Первым делом нам надо добавить JavaScript, который будет менять контент.

<script language="javascript"> 
$(document).ready(function(){
	$('#testimonials .slide');
	setInterval(function(){
		$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
			if($(this).next('.slide').size()){
				$(this).next().fadeIn(1000);
			}
			else{
				$('#testimonials .slide').eq(0).fadeIn(1000);
			}
		});
	},15000);	
});	
</script>

Убедитесь, что jQuery загружен. Если нет, то его необходимо добавить.

Далее мы создадим цикл, который будет показывать отзывы. Вот код, который мы использовали:

<div id="testimonials">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
static $count = 0;
if ($count == "1") { ?>



<div class="slide" style="display: none;">
<div class="client-contact-info"><?php echo $data[ 'person-name' ]; ?>,&nbsp;<?php echo $data[ 'position' ]; ?>,&nbsp;<a href="<?php echo $data[ 'link' ]; ?>" title="<?php echo $data[ 'company' ]; ?>"><?php echo $data[ 'company' ]; ?></a></div>
<div class="clear"></div>
<div class="testimonial-quote"><?php the_content(); ?></div>
</div>
<?php }
else { ?>


<div class="slide">
<div class="client-contact-info"><?php echo $data[ 'person-name' ]; ?>,&nbsp;<?php echo $data[ 'position' ]; ?>,&nbsp;<a href="<?php echo $data[ 'link' ]; ?>" title="<?php echo $data[ 'company' ]; ?>"><?php echo $data[ 'company' ]; ?></a></div>
<div class="clear"></div>
<div class="testimonial-quote"><?php the_content(); ?></div>
</div>

<?php 
$count++; } 
endwhile; 
endif; ?>
</div>

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

Небольшое пояснение, почему этот цикл немного более сложный, чем обычный цикл. Сначала цикл вытягивает посты из типа постов «Отзывы». Мы показываем лишь 10 недавних отзывов. Скрипт работает так, что нужно показывать лишь один пост, остальные 9 должны быть невидимыми, и могут появляться или исчезать.

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

#testimonials{}
#testimonials .slide{color: #9c968e;}
#testimonials .client-contact-info{margin: 25px 0 0 0; float: left;}
#testimonials .testimonial-quote{padding: 3px 0 0 65px; line-height: 1.5em; font-family: "proxima-nova-1", "proxima-nova-2", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: normal; font-style: italic; margin: 10px 0 20px 0;}

Теперь результат будет выглядеть так:

Имя клиента, Его позиция в компании, Имя компании (ссылка)
Текст приветствия

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

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

Просто создайте новый файл и назовите его testimonials.php, сохраните его в папке с плагинами (/wp-content/plugins/). После вставьте следующий код в файл:

                                             
                                             
<?php 


add_action( 'init', 'wpb_register_cpt_testimonial' );

function wpb_register_cpt_testimonial() {

    $labels = array( 
        'name' => _x( 'Testimonials', 'testimonial' ),
        'singular_name' => _x( 'testimonial', 'testimonial' ),
        'add_new' => _x( 'Add New', 'testimonial' ),
        'add_new_item' => _x( 'Add New testimonial', 'testimonial' ),
        'edit_item' => _x( 'Edit testimonial', 'testimonial' ),
        'new_item' => _x( 'New testimonial', 'testimonial' ),
        'view_item' => _x( 'View testimonial', 'testimonial' ),
        'search_items' => _x( 'Search Testimonials', 'testimonial' ),
        'not_found' => _x( 'No testimonials found', 'testimonial' ),
        'not_found_in_trash' => _x( 'No testimonials found in Trash', 'testimonial' ),
        'parent_item_colon' => _x( 'Parent testimonial:', 'testimonial' ),
        'menu_name' => _x( 'Testimonials', 'testimonial' ),
    );

    $args = array( 
        'labels' => $labels,
        'hierarchical' => false,
        
        'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ),
        
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        
        
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );

    register_post_type( 'testimonial', $args );
}

$key = "testimonial";
$meta_boxes = array(
"person-name" => array(
"name" => "person-name",
"title" => "Person's Name",
"description" => "Enter the name of the person who gave you the testimonial."),
"position" => array(
"name" => "position",
"title" => "Position in Company",
"description" => "Enter their position in their specific company."),
"company" => array(
"name" => "company",
"title" => "Company Name",
"description" => "Enter the client Company Name"),
"link" => array(
"name" => "link",
"title" => "Client Link",
"description" => "Enter the link to client's site, or you can enter the link to your portfolio page where you have the client displayed.")
);
 
function wpb_create_meta_box() {
global $key;
 
if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Information', 'display_meta_box', 'testimonial', 'normal', 'high' );
}
}
 
function display_meta_box() {
global $post, $meta_boxes, $key;
?>
 
<div class="form-wrap">
 
<?php
wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true );
 
foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>
 
<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo (isset($data[ $meta_box[ 'name' ] ]) ? htmlspecialchars( $data[ $meta_box[ 'name' ] ] ) : ''); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>
 
<?php } ?>
 
</div>
<?php
}
 
function wpb_save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;
 
foreach( $meta_boxes as $meta_box ) {
if (isset($_POST[ $meta_box[ 'name' ] ])) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}
}
 
if (!isset($_POST[ $key . '_wpnonce' ])) 
return $post_id;

if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;
 
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
 
update_post_meta( $post_id, $key, $data );
}
 
add_action( 'admin_menu', 'wpb_create_meta_box' );
add_action( 'save_post', 'wpb_save_meta_box' );



function wpb_display_testimonials() { ?>
<script language="javascript"> 
$(document).ready(function(){
	$('#testimonials .slide');
	setInterval(function(){
		$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
			if($(this).next('.slide').size()){
				$(this).next().fadeIn(1000);
			}
			else{
				$('#testimonials .slide').eq(0).fadeIn(1000);
			}
		});
	},15000);	
});	
</script> 
<style type="text/css">
#testimonials .slide{color: #9c968e;}
#testimonials .client-contact-info{margin: 25px 0 0 0; float: left;}
#testimonials .testimonial-quote{background: url(images/quotebg.png) repeat-y; padding: 3px 0 0 65px; line-height: 1.5em; font-family: "proxima-nova-1", "proxima-nova-2", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: normal; font-style: italic; margin: 10px 0 20px 0;}
</style>
<div id="testimonials">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 100, 'orderby'   => 'menu_order', 'order'     => 'ASC' );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
static $count = 0;
if ($count == "1") { ?>



<div class="slide" style="display: none;">
<div class="client-contact-info"><?php echo $data[ 'person-name' ]; ?>,&nbsp;<?php echo $data[ 'position' ]; ?>,&nbsp;<a href="<?php echo $data[ 'link' ]; ?>" title="<?php echo $data[ 'company' ]; ?>"><?php echo $data[ 'company' ]; ?></a></div>
<div class="clear"></div>
<div class="testimonial-quote"><?php the_content(); ?></div>
</div>
<?php }
else { ?>


<div class="slide">
<div class="client-contact-info"><?php echo $data[ 'person-name' ]; ?>,&nbsp;<?php echo $data[ 'position' ]; ?>,&nbsp;<a href="<?php echo $data[ 'link' ]; ?>" title="<?php echo $data[ 'company' ]; ?>"><?php echo $data[ 'company' ]; ?></a></div>
<div class="clear"></div>
<div class="testimonial-quote"><?php the_content(); ?></div>
</div>

<?php 
$count++; } 
endwhile; 
endif;
echo '</div>';
}
?>

Теперь откройте ваш файл темы, в которой вы хотите отобразить всё это, и вставьте код:

<?php wpb_display_testimonials(); ?>

Вы также можете изменить стили. Помните, что если jQuery не был добавлен в тему, то нужно его добавить.

Надеемся, данная статья вам помогла, если у вас есть вопросы, то напишите его в комментариях.

 

---

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

---

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

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

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

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

• Как установить WordPress, используя Softaculous
• Как установить WordPress, используя FTP
• Как установить WordPress на ваш компьютер
• Как установить WordPress на вашем языке
• Как установить WordPress Multisite Network
• Что делать после установки WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете даже сделать сайт 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

---

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

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

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

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

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

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

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

<?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' => 10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
	
// Generating Output 
$faq  .= '<div id="accordion">'; //Open the container
foreach ( $posts as $post ) { // Generate the markup for each Question
$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
$post->post_title,
wpautop($post->post_content)
);
}
$faq .= '</div>'; //Close the container
return $faq; //Return the HTML.
}
add_shortcode('faq_accordion', 'accordion_shortcode');

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

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

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

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

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

[faq_accordion]

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

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

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

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

 

---

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

---