softsprint menu Order

Несколько языков WordPress. Плагин qTranslate

February 20, 2015 in 7:14 pm | wiki

more >

Миниатюра в качестве фона для поста или страницы WordPress

January 6, 2015 in 12:54 am | wiki

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

1) добавить в файл functions.php следующий код:

1
<?php add_theme_support( 'post-thumbnails' ); ?>

Этот код установит поддержку миниатюр Вашей темой.
2) в цикле WordPress сделаем следующие изменения:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php if ( have_posts() ) :  while ( have_posts() ) : the_post(); ?>
		<article class="post" style="background-image: url(<?php
			if ( has_post_thumbnail()) {
			$full_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
			echo ''.$full_image_url[0] . '';
			}
		?>)">
		<h1 class="h1"><?php the_title(); ?></h1>
			<?php the_content(); ?>
		</article>
		<?php endwhile; ?>
		<?php else : ?>
			<h2 class="nothing">Nothing has found!</h2>
	<?php endif; ?>

Таким образом, мы задали стиль background-image с картинкой-миниатюрой нашему посту.
Далее остаётся настроить на свой вкус стили CSS и миниатюра вместо фона поста будет выводится не только при его открытии, но и в списке постов блога (настройки выполняются через CSS).
Пример фонового изображения поста в одной из наших работ:
darteldesign.com

Как в WordPress установить миниатюру в качестве фона?

December 12, 2014 in 1:11 pm | wiki

Сегодня ответим на вопрос: «Как установить миниатюру в качестве фона для записи, страницы или всего сайта?»

Итак, например, нам нужно задать фон нашему посту в виде миниатюры. Для этого задаём свойство background-image c url нашей миниатюры контейнеру нашего поста. Пример кода из цикла WordPress (о нём уже писали здесь):

1
2
3
4
5
6
7
8
9
10
11
<?php
if ( have_posts() ) :  while ( have_posts() ) : the_post(); ?>
<article class="post" style="background-image: url(<?php
 if ( has_post_thumbnail()) {
   	$full_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
   	echo ''.$full_image_url[0] . '';
}
 ?>)">  // далее идут стандартные функции цикла WordPress
				</article>
<?php endwhile; ?>
<?php endif; ?>

Таким способом мы проверяем:

Осталось минимально подправить стили в CSS для бэкграунда нашего поста, например, так:

1
2
3
. post {
background-size: 100% 100%;
}

Внимание! Чтобы можно было установить для поста картинку-миниатюру, нужно активировать эту возможность функцией – add_theme_support( ‘post-thumbnails’ ); в файле шаблона funсtions.php.

Таким простым способом Вы можете установить миниатюру в качестве фона для записи, страницы или всего сайта. Последний вариант предполагает установку стиля background-image для тега body. В таком случае, при загрузке поста будет устанавливаться миниатюра в качестве фона для всего сайта, причём, миниатюра загрузится именно та, что соответствует посту, который Вы просматриваете!

P.S. Если перед Вами стоит задача поставить не только картинку-миниатюру в качестве фона, а слайдера из множества изображений, советую применить плагин WP Vegas

https://wordpress.org/plugins/vegas-fullscreen-background-slider/

Он позволяет создавать слайдеры отдельно для каждой страницы. Кол-во изображений может быть любым. Плагин является бесплатным и простым в установке.

Экспорт товаров WooCommerce (WordPress) – плагин Store Exporter

December 7, 2014 in 1:23 pm | wiki

В этой краткой заметке опишем один из многочисленных способов экспорта товаров в файл Excel с магазина на базе WooCommerce (WordPress). Для этого понадобится такой плагин:
Store Exporterhttps://wordpress.org/plugins/woocommerce-exporter/

У плагина есть много возможностей и … особенностей, с которыми нужно, увы, бороться. Здесь мы опишем первый попавшийся алгоритм выгрузки товаров с магазина в Эксель.
Итак, приступим:

1) В настройках плагина (таб «Settings») в разделе «CSV Settings» указываем любой уникальный символ, например, ~ в поле «Field delimiter». Этот символ будет далее использоваться для разбиения значений товара (его цена, артикул и т.д.) по отдельным колонкам в Excel.

Оригинальное описание этого поля в самом плагине выглядит так: «The field delimiter is the character separating each cell in your CSV. This is typically the ‘,’ (comma) character.»

Базовое значение (запятая) нам не подходит, поскольку запятая может встречаться в описании самого товара – в таком случае разбиение по колонкам в Экселе пройдёт с ошибками.

Store Exporter2) Нажимаем таб “Export” и отмечаем нужные поля, например так:

Store Exporter

Получаем файл такого вида: export_product.csv

3) Открываем файл в Excel и разбиваем по колонкам содержимое с мощью разделителя ~ , который мы и задавали в настройках плагина.
Получаем такой результат: export_product.xlsx

Как видим, все значения товаров разбиты по колонкам:

woocommerce export4) Обратите внимание, свойство товара “Description” следует выгружать отдельно, в противном случае получим кашу в файле, которую разбить по колонкам не удастся.
Для этого отмечаем чекбокс “Description” в настройках плагина Store Exporter:

produtcs export

В результате получаем файл с аккуратно расположенными описаниями товаров: для каждого товара описание в отдельной строчке (сколько товаров, столько строчек).
Файл-пример выгрузки: export_product-description.csv

5) Поскольку полученные в предыдущем пункте описания товаров расположены в том же порядке, что и в файле export_product.xlsx (автоматически сортируются плагином по ID в обратном порядке), то наша задача заключается лишь в объединении двух файлов в один.
Открываем export_product-description.csv и копируем первую колонку с описаниями товаров в файл export_product.xlsx (в последнюю колонку). Получаем итоговый файл с аккуратно структурированными данными по товарам нашего магазина. Теперь Вы можете использоваться этот файл экспорта базы товаров с магазина на своё усмотрение: добавлять наценки и обратно импортировать (это – отдельная тема разговора), вести различные электронные учёты, прочее.

Файл-результат: export.xlsx

Landing Page на WordPress. Как создать?

November 16, 2014 in 10:53 pm | wiki

Существует много решений, как создать Landing Page на базе WordPress – всё ограничивается фантазией разработчика и требованиями заказчика. Сегодня мы рассмотрим один из подходов создания лендинга на WordPress.

landing softsprintСхема нашего сайта на WordPress:

Логика следующая: на стартовую страницу выводим посты во всю ширину окна браузера – это и будут наши блоки лендинга (на схеме post 1, post 2, post 3). Поскольку наш сайт имеет также блог, в нём должны быть исключены посты с главной страницы – зачем же дублировать контент!?

Рассмотрим конкретный пример. Файл index.php отвечает за загрузку главной страницы – наш landing page:

1
2
3
<?php get_header(); ?>
<?php get_template_part('landing');?> 
<?php get_footer(); ?>

Функция get_template_part(‘landing’) подключает файл landing.php (детальнее было описано здесь: http://softsprint.net/wordpress-part-2/) , который выводит цикл постов на наш Landing page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="landing">  
			<?php
global $query_string;
query_posts($query_string . "&cat=1");
 
			if ( have_posts() ) :  while ( have_posts() ) : the_post(); ?>
				<article class="landing">
					<h3><?php the_title(); ?></h3>
					<?php the_content(); ?>
				</article>
			<?php endwhile; ?>
			<?php else : ?>
				<div class="else">
					<h2>По Вашему запросу ничего не найдено!</h2>
				</div>
			<?php endif; ?>
		</div>

Цикл вывода постов является стандартным для WordPress и рассматривался здесь: http://softsprint.net/the-loop-wordpress-part-4/ , но имеет особенность:

1
2
global $query_string;
query_posts($query_string . "&cat=1");

Функция query_posts () применяется для указания, какие именно посты нужно показывать в базовом Цикле WordPress; изменяет Цикл WordPress и выводит посты заново. В нашем случае выводим посты из категории №1 (по умолчанию – «Без рубрики»), за что отвечает параметр “cat=1”.
Вообще, функция query_posts () возвращает список постов «с нуля» – без базовых настроек WordPress (например не определяется, какая страница показывается – архив, категория, по дате т.д.).

Строчка global $query_string как раз и отвечает за присвоение базовых настроек вывода постов в цикле WordPress. В итоге получается, что благодаря global $query_string выполняется стандартный вывод постов WordPress, но только из категории №1 («Без рубрики») благодаря query_posts($query_string . “&cat=1”).

Формирование главной страницы Лендинга рассмотрели. Теперь перейдём к рассмотрению следующей задачи: внутренний блог (blog) с обычными постами (post 3, post 4, post 5) и боковой панелью меню слева (sidebar menu). Задача имеет 2 особенности:

1
2
3
4
5
6
7
8
9
<?php
/*
Template Name: Blog
*/
?>
<?php get_header(); ?>
<?php get_template_part('loopblog'); ?> 
<?php get_sidebar(); ?> 	
<?php get_footer(); ?>

Эта конструкция означает, что мы создаём новый шаблон страницы под названием Blog:

1
2
3
/*
Template Name: blog
*/

Детальнее о шаблонах страницы в этой заметке: http://softsprint.net/landing-page-wordpress/
Функция get_template_part(‘loopblog’) подключает файл loopblog.php, который отвечает за вывод цикла постов WordPress. Содержимое файла loopblog.php следующее:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="blog">  
			<?php 
query_posts('cat=-1');
			if ( have_posts() ) :  while ( have_posts() ) : the_post(); ?>
				<article class="blog">
					<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
					<p class="time"><?php the_time('F j, Y'); ?> в <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('Нет комментариев', '1 комментарий', '% комментариев'); ?></p>
					<?php the_content('read more >'); ?>
				</article>
			<?php endwhile; ?>
				<div class="navigation">
					<?php posts_nav_link(); ?>
				</div>
			<?php else : ?>
				<div class="post">
					<h2>По Вашему запросу ничего не найдено!</h2>
				</div>
			<?php endif; ?>
		</div>

Следует обратить внимание, что параметр функции query_posts() изменился на ‘cat=-1’ (добавился минус) по сравнению с файлом landing.php. Это означает, что теперь мы выводим посты из всех категорий, кроме категории №1 («Без рубрики»), т.е., исключаем посты с главной страницы – нашего Landing Page.

Также удалено обращение к глобальной переменной $query_string, которое отвечает за присвоение базовых настроек вывода постов в цикле WordPress. Если мы оставим обращение к $query_string (по аналогии с файлом landing.php), то вместо вывода постов в виде блога на странице http://site.com/blog будет отображаться только содержимое этой страницы.

Последняя составляющая схемы нашего сайта – страницы сайта (page, archive, category, прочие). Цикл постов, например, для archive.php выводим так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="blog">  
			<?php 
global $query_string;
query_posts($query_string . "&cat=-1");
			if ( have_posts() ) :  while ( have_posts() ) : the_post(); ?>
				<article class="blog">
					<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
					<p class="time"><?php the_time('F j, Y'); ?> в <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('Нет комментариев', '1 комментарий', '% комментариев'); ?></p>
					<?php the_content('read more >'); ?>
				</article>
			<?php endwhile; ?>
				<div class="navigation">
					<?php posts_nav_link(); ?>
				</div>
			<?php else : ?>
				<div class="post">
					<h2>По Вашему запросу ничего не найдено!</h2>
				</div>
			<?php endif; ?>
		</div>

Т.е., задаём параметр “cat=-1”, чтобы выводить в архивах блога посты из всех категорий, кроме категории №1 («Без категории»).

Некоторый комментарии:

Также хотим обратить внимание на альтернативный способ вывода постов с помощью функции get_posts() , который может быть использован неограниченное число раз на странице (например, в подвале, в сайдбаре и т.д.). Разница между query_posts() и get_posts() в том, что get_posts() не вмешивается в базовый запрос, а создает отдельный экземпляр класса WP_Query. Итак, смотрим пример вывода постов из категории №1 в кол-ве 9 штук на странице:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="content">  
<?php
$my_posts = get_posts('numberposts=9&category=1');
foreach ($my_posts as $post) :
setup_postdata($post);
?>
				<article class="post">
					<h3><?php the_title(); ?></h3>
					<p class="time"><?php the_time('F j, Y'); ?> в <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('Нет комментариев', '1 комментарий', '% комментариев'); ?></p>
					<?php the_content(); ?>
				</article>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div>

На сегодня всё, а пока можете посмотреть наш Landing Page и заказать Лендинг для себя!

landing

Также Вы можете изучить наш главный сайт на WordPress:
softsprint

Добавление виджетов в тему WordPress – часть 7

October 19, 2014 in 12:26 pm | wiki

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

Итак, для добавления виджетов в тему нужно сделать два шага:

1) Добавляем в файл functions.php следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
function register_my_widgets(){
	register_sidebar( array(
		'name' => 'right sidebar',
		'id' => 'sidebar',
		'before_widget' => '<li class="sidebar">',
		'after_widget' => '</li>',
		'before_title' => '<h4>',
		'after_title' => '</h4>',
	) );
}
add_action( 'widgets_init', 'register_my_widgets' );
?>

2) Добавляем в файл sidebar.php такой код:

1
2
3
4
5
<div id="sidebar">
	<ul>		
		<?php dynamic_sidebar('sidebar'); ?>
	</ul>
</div>

Напомним, файл sidebar.php подключается в файле index.php с помощью функции:

1
<?php get_sidebar(); ?>

Подробнее о файле index.php мы писали в части №2.

Теперь детальнее рассмотрим функции, присутствующие в шаге №1 и 2.
Функция register_sidebar регистрирует панель виджетов, которые отобразятся в админ-панели WordPress и на самом сайте. Параметрами функции в нашем примере являются:

1
2
3
4
5
6
- 'name' => 'right sidebar' – название панели виджетов, которое будет отображаться в админке WordPress. В данном случае - right sidebar;
- 'id' => 'sidebar' – идентификатор виджета (id);
- 'before_widget' => '<li class="sidebar">' – HTML-код, который будет расположен перед каждым виджетом. В нашем случае – элемент ненумерованного списка <li class="sidebar"> 
- 'after_widget' => '</li>' - HTML код, который будет расположен после каждого виджета в панели: </li>;
- 'before_title' => '<h4>' – HTML-код перед заголовком виджета. В нашей теме – это <h4>;
- 'after_title' => '</h4>' - HTML-код после заголовка виджета

Следует заметить, что параметры ‘before_widget’ и ‘after_widget’ по умолчанию имеют значения

1
<li id="%1$s" class="widget %2$s"> и </li>

, т.е., сами формируют элемент списка, поэтому их можно и не указывать. Мы же их обозначили, чтобы сразу присвоить нужные классы для последующего описания в файле стилей CSS.
В свою очередь параметры ‘before_title’ и ‘after_title’ по умолчанию формируют теги

1
'<h2 class="widgettitle">' и </h2>

Перейдём к шагу №2. ВНИМАТЕЛЬНО! Функция dynamic_sidebar выводит виджет под названием ‘sidebar’, которое должно совпадать с идентификатором (‘id’ => ‘sidebar’) в функции register_sidebar. Т.е., связка двух функций (dynamic_sidebar и register_sidebar) выполняется с помощью параметра ‘id’, которое заодно выступает и названием виджета (должно совпадать)!
Важно отметить, что данные функции формируют элементы списка:

1
<li></li>

, но не сам обрамляющий тег<ul></ul>, именно поэтому мы добавили его в шаге №2.
В результате выполнения приведённых выше функций WordPress сформирует ненумерованный список:

1
<ul><li></li></ul>

где каждый элемент списка <li></li> будет содержать тот блок, который мы добавим в панели виджетов админки WordPress, например, блок тегов, календарь, поиск и т.д.

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

Обращайтесь к нам – мы создадим оригинальную тему WordPress на заказ!

 

Создание произвольного меню в теме WordPress – часть 6

October 18, 2014 in 11:20 am | wiki

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

1) В файл functions.php помещаем такой код:

1
2
3
4
5
<?php
register_nav_menus(array(
	'top'    => 'Верхнее меню'
));
?>

2) В файл header.php помещаем такой код:

1
2
3
4
5
6
7
<?php 
			wp_nav_menu( array(
			'menu_class'=>'menu',
			'theme_location'=>'top',
			'container'=>''
			) );
		?>

После чего в админ-панели создаём новое меню с любым названием (например, MenuTop) и привязываем его к области темы. В данном случае область темы – «Верхнее меню», что указано в пункте 1 (пример на скриншоте ниже).
В результате WordPress сгенерирует ненумерованный список следующего вида:

1
<ul><li></li></ul>

menu wordpressТеперь рассмотрим подробнее пункты 1 и 2.

Функция register_nav_menus (прописываем её в файле functions.php) регистрирует несколько меню одновременно. В нашей теме зарегистрировано только одно меню под названием top.
Для вывода в шапке сайта этого меню top применяем функцию wp_nav_menu (прописываем её в файле header.php). Присваиваем параметру “theme_location” значение top . В нашем примере выглядит так: ‘theme_location’=>’top’.

Т.е., название top должно быть указано в обеих функциях (register_nav_menus и wp_nav_menu) и является их связкой.

Также следует отметить, что выводить произвольное меню с помощью функции wp_nav_menu Вы можете в любой области сайта – не обязательно в шапке (файл header.php). Это может быть подвал или боковая панель, тогда вставляйте функцию wp_nav_menu в файл footer.php или sidebar.php соответственно.

Кроме того, в функции wp_nav_menu мы определили:

Также могут задаваться такие параметры:

1
2
3
4
5
6
7
8
9
  'container_class' => - class у контейнера меню
  'container_id'    => - id у контейнера меню
  'menu_class'      => - class у тега ul 
  'menu_id'         => - id у тега ul
  'before'          => - текст перед тегом <a> в меню
  'after'           => - текст после каждого тега </a> в меню
  'link_before'     => - текст перед анкором каждой ссылки в меню
  'link_after'      => - текст после анкора каждой ссылки в меню
  'depth'           => - уровень вложенности меню (по умолчанию 0 – без ограничений)

Произвольное меню в WordPress – это мега-удобная вещь! Не забывайте, что у нас Вы можете также заказать изготовление темы WordPress – обращайтесь!

Как работает цикл the loop в темах WordPress – часть 4

October 15, 2014 in 1:47 pm | wiki

В статье Cоздание index.php для темы WordPress — часть 2 мы рассмотрели формирование файла index.php, в котором применили функцию <?php get_template_part(‘loop’); ?>, подключив тем самым файл loop.php

Дословно loop – это цикл. В WordPress под циклом (loop) понимают вывод постов. Простой пример цикла:

1
2
3
4
5
6
<?php if ( have_posts() ) :  while ( have_posts() ) : the_post(); ?>
   <!-- 
	Вывод поста с названием, категорией, тегами, датой публикации, прочее…
	-->
<?php endwhile; ?>
<?php endif; ?>

Как работает цикл (loop)?

Обратите внимание – знак в команде php «:» означает условие, а знак «;» – закрывает команду.

Изучим содержимое нашего файла loop.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="content">  
			<?php if ( have_posts() ) :  while ( have_posts() ) : the_post(); ?>
				<article class="post">
					<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
					<p class="time"><?php the_time('F j, Y'); ?> в <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('Нет комментариев', '1 комментарий', '% комментариев'); ?></p>
					<?php the_content('read more >'); ?>
				</article>
			<?php endwhile; ?>
				<div class="navigation">
					<?php posts_nav_link(); ?>
				</div>
			<?php else : ?>
				<div class="post">
					<h2>По Вашему запросу ничего не найдено!</h2>
				</div>
			<?php endif; ?>
		</div>

В нашем случае loop работает так:

1) проверяем, есть ли посты на сайте if ( have_posts() и пока посты есть while ( have_posts() , выводим их функцией the_post(); в виде:

1
2
3
4
5
<article class="post">
					<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
					<p class="time"><?php the_time('F j, Y'); ?> в <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('Нет комментариев', '1 комментарий', '% комментариев'); ?></p>
					<?php the_content('читать далее'); ?>
				</article>

У нас каждый пост обрамлен в <article class=”post”></article> , имеет название-ссылку <h3><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h3>, которая состоит из функций:

2) Когда выведены все посты (кол-во их указывается в админке WordPress) согласно условию <?php endwhile; ?> , срабатывает функция <?php posts_nav_link(); ?> , которая выводит ссылки на предыдущую и следующую страницы.

3) Если же никаких постов не нашлось, то срабатывает альтернативный вариант <?php else : ?> и выводится <h2>По Вашему запросу ничего не найдено!</h2> .

На этом цикл закрывается – <?php endif; ?> .

На сегодня всё! В следующем уроке рассмотрим цикл (loop) в рамках файла single.php, который выводит конкретный пост при его открытии по ссылке.

Установка слайдера FlexSlider от WooThemes на тему WordPress

October 10, 2014 in 12:04 pm | wiki

В этой краткой заметке рассмотрим установку слайдера на тему WordPress. Конечно же, в сети есть масса плагинов с шорткодами интеграции в тему или пост, админ-панелями, прочее… но нас интересует максимально лёгкий и гибкий вариант. Это особо актуально, если нужно создать свою уникальную тему WordPress. На помощь придёт бесплатный плагин FlexSlider от WooThemes.

Ссылка на страницу плагина: http://www.woothemes.com/flexslider/

Установка через админ-панель WordPress не требуется. Для отображения базовой версии слайдера в нашей шапке сайта нужно сделать следующие шаги:

1. Вставляем в корень сайта следующие файлы:

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

2. Вставить следующий код перед закрывающимся тегом </head>:

1
2
3
4
5
6
7
8
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

Этот код подключает файл стилей flexslider.css, который мы далее настроем под себя; подключает библиотеку jquery и файлы js самого плагина.

3. В файл шапки темы (как правило, header.php) вставляем код:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

В данном коде указываются пути на изображения слайдов (slide1.jpg – slide3.jpg). Количество изображений не имеет ограничений.

4. В файле jquery.flexslider.js удаляем значения Previous и Next (строки 1091 и 1092 в файле):

1088
1089
1090
1091
1092
    // Primary Controls
    controlNav: true,               //Boolean: Create navigation for paging control of each slide? Note: Leave true for manualControls usage
    directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
    prevText: "Previous",           //String: Set the text for the "previous" directionNav item
    nextText: "Next",               //String: Set the text for the "next" directionNav item

5. В файле flexslider.css заменяем следующий код (строки 71, 72 в файле)

71
72
.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; line-height:1; display: inline-block; content: 'f001'; }
.flex-direction-nav a.flex-next:before  { content: 'f002'; }

на этот:

1
2
3
4
5
6
7
8
9
10
11
.flex-direction-nav a:before, .flex-direction-nav a.flex-next:before  {
	display: inline-block;
	content: '';
	width: 27px;
	height: 27px;
	background-image: url('bg_direction_nav.png');
	margin-top: 7px;
}
.flex-direction-nav a.flex-next:before  {
background-position: 26px;	
}

Изображение bg_direction_nav.png отвечает за стрелки слева и справа слайдов для их перемотки. Манипуляции с файлом CSS понадобились, поскольку базовая установка плагина не отобразила эти стрелки (в сети есть материалы на эту тему – можете также поГуглить).

В нашей экспериментальной теме Lightweight рассмотренный слайдер FlexSlider вписался, как родной (кирпичи на скриншоте):

slider FlexSlider

Также данный слайдер установлен на нашем лендинге http://softsprint.net

softsprint

Оригинальный плагин FlexSlider: woothemes-FlexSlider-version-2.2.2-25-g8b3766e.zip
Наша сборка плагина с перечисленными изменениями: FlexSlider.zip

Создание header.php в теме WordPress – часть 3

October 8, 2014 in 3:31 pm | wiki

В прошлой статье мы узнали, что файл index.php в темах WordPress выступает в роли ствола в дереве, который держит на себе header.php, footer.php и другие файлы. Рассмотрим header.php – файл шапки нашей темы Lightweight. У Вас может быть свой файл шапки, но есть общие функции, которые совпадут. Код шапки нашей темы:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
	<div class="all">
		<a href="<?php echo get_option('home'); ?>/"><h1><?php bloginfo('name'); ?></h1></a>
		<h2><?php bloginfo('description'); ?></h2>
		<hr class="firsthr">
		<?php 
			wp_nav_menu( array(
			'menu_class'=>'menu',
			'theme_location'=>'top',
			'container'=>''
			) );
		?>
		<?php get_search_form(); ?>
		<hr class="secondhr">

Пройдёмся последовательно по всем строкам.

Строка ниже отображает название сайта в браузере (тайтл) и состоит из функций:

1
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

В итоге получается:
Название сайта » Название страницы

Можем переписать тайтл в таком виде:

1
<title><?php wp_title("", true); ?> | <?php bloginfo('name'); ?></title>

Получим результат: Название страницы | Название сайта

Пустые кавычки “” означают, что знак » не будет отображаться.
Для указания браузеру формата документа и кодировки сайта применяем:

1
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

В результате получим:

1
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Строка

1
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

служит для подключения файла стилей CSS:

Следующие строки (с 7 по 9) содержат функции bloginfo(‘rss2_url’), bloginfo(‘atom_url’), bloginfo(‘pingback_url’) и отвечают за ссылки на RSS 2.0 фиды (/feed), Atom фиды (/feed/atom) и уведомления на XML-RPC файл (xmlrpc.php), соответственно.

Последняя строка перед закрывающим тегом </head>

1
<?php wp_head(); ?>

содержит функцию wp_head(), которая означает тег шапки шаблона. Добавляется в файлы темы header.php, index.php и стоит перед </head>

Всё, что до тега <body> практически всегда совпадает (является типовым). Теперь перейдём к телу сайта, с которого и начинается дизайн нашей темы.
Строка

1
<a href="<?php echo get_option('home'); ?>/"><h1><?php bloginfo('name'); ?></h1></a>

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

Строка

1
<h2><?php bloginfo('description'); ?></h2>

выводит краткое описание сайта, обрамлённое в тег h2. Название сайта и краткое описание задаются в админке WordPress.

Следующий код относится к произвольному меню и будет рассмотрен в отдельной статье – сейчас пропускаем его:

1
2
3
4
5
6
7
<?php 
			wp_nav_menu( array(
			'menu_class'=>'menu',
			'theme_location'=>'top',
			'container'=>''
			) );
		?>

Последняя функция, с которой знакомимся сегодня, подключает форму поиска, находящуюся в файле темы – searchform.php:

1
get_search_form();

Форму поиска и содержимое файла searchform.php изучим отдельно в одной из заметок.

Содержание статей о создании темы WordPress находится здесь: http://softsprint.net/wiki/

Let`s discuss

softsprint heart

Our contacts

Lviv, Ukraine
моб: +380 97 551 44 55
skype: softsprint.net

Say hello!