После нескольких лет (или даже месяцев) зачатия и развития тем WordPress, особенно для покупателей, вы начинаете понимать, что многие функции можно нормализовать или перевести в «стартовую тему или набор». Это помогает запустить метод разработки и быстро продвигаться вперед.
Я обнаружил, что лучший первый шаг в этом — закрепить большинство распространенных целей и включить их в functions.php. Этот документ functions.php необходимо будет расширять для удовлетворения потребностей конкретной темы по мере появления новых задач, но он обеспечит более чем потрясающую отправную точку для разработки.
Есть около 13 ключевых целей, с которых я хотел бы начать и добавлю к ним по мере необходимости…
1. Поддержка пользовательских меню
Характеристика меню навигации, представленная в WordPress 3.0, позволяет интуитивно создавать и поддерживать навигационные меню по темам.
В самом маленьком случае для эталонной темы потребуется основной список навигации, возможно, в верхнем колонтитуле и дополнительный список навигации. Для этого мы зарегистрируем эти два списка еды «Основной список» и «Вторичный список»
Хотя это не особенно новая функция, все же приятно обернуть ее в if function_exists () на тот случай, если клиент подключен в установке до 3.0:
В документе functions.php включите следующее:
if( function_exists( 'register_nav_menus') ) {
register_nav_menus(
array(
'main_menu'=> __( 'Main Menu', 'cake'),
'secondary_menu'=> __( 'Secondary Menu', 'cake'),
)
);
}
Теперь, когда меню зарегистрированы, нам нужно указать теме, куда их выводить. Мы бы хотели, чтобы главное меню появилось в нашем заголовке. Итак, в наш header.php файл мы включили следующий код:
<?php if( has_nav_menu( 'main_menu') ) { ?>
<?php $defaults = array(
'theme_location' => 'main_menu',
'menu' => '',
'container' => false,
'echo' => true,
'fallback_cb' => false,
'items_wrap' => '<ul id="%1$s"> %3$s</ul>',
'depth' => 0);
wp_nav_menu( $defaults );
?>
<?php } else{ ?>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<?php } ?>
Сначала мы проверяем, есть ли у нас определенное меню с именем ‘main_menu’, и если мы это сделаем, мы вставляем здесь его содержимое, в противном случае мы возвращаемся к стандартному значению, wp_list_pages() которое мы можем дополнительно настроить для отображения ссылок по мере необходимости.
Если вы хотите еще больше изменить меню, см. функции.
Мы хотим, чтобы вторичное меню появилось в нижнем колонтитуле, поэтому мы открываем footer.php и включаем следующий код:
<?php if( has_nav_menu( 'secondary_menu') ) { ?>
<?php $defaults = array(
'theme_location' => 'secondary_menu',
'menu' => '',
'container' => false,
'echo' => true,
'fallback_cb' => false,
'items_wrap' => '<ul id="%1$s"> %3$s</ul>',
'depth' => 0);
wp_nav_menu( $defaults );
?>
<?php } else{ ?>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<?php } ?>
2. Стиль визуального редактора
Эта функция позволяет использовать CSS на заказ для стилизации визуального рецензента WordPress TinyMCE.
Создайте документ CSS с именем editor-style.css и вставьте ваши методы в интерьер. Как заполнитель, я хотел бы начать с методов в файле editor-style.css темы Twenty Twelve.
В functions.php добавлении следующее:
add_editor_style();
Если вы не хотите использовать имя «стиль-редактор» для своего файла CSS, а также хотите переместить файл в другое место, например, в каталог css, измените функцию.
Например, я хочу назвать свой файл tiny-mce-styles.css и хочу, чтобы он находился в моей директории CSS; поэтому моя функция будет выглядеть так:
add_editor_style('/css/editor-style.css');
Пока мы на этом, мы могли бы также стилизовать редактор для языков с написанием справа налево. В каталоге темы создайте файл CSS с именем editor-style-rtl.css и, как минимум, включите следующее:
html .mceContentBody {
direction: rtl;
unicode-bidi: embed;
}
li {
margin: 024px 00;
margin: 01.714285714rem 00;
}
dl {
margin: 024px;
margin: 01.714285714rem;
}
tr th {
text-align: right;
}
td {
padding: 6px 06px 10px;
text-align: right;
}
.wp-caption {
text-align: right;
}
Опять же, как заполнитель, вышеупомянутые стили взяты из темы Двадцать двенадцать. Преобразуйте и расширяйте по мере необходимости.
3. Поддержка пользовательских аватаров
У большинства людей, комментирующих блоги онлайн, есть аватар, связанный с ними. Однако, если они этого не делают, и вам не особенно нравятся варианты аватаров по умолчанию в WordPress, вы можете охарактеризовать свой собственный.
Для этого включите в свой код следующий код functions.php:
if( !function_exists('cake_addgravatar') ) {
functioncake_addgravatar( $avatar_defaults ) {
$myavatar = get_template_directory_uri() . '/images/avatar.png';
$avatar_defaults[$myavatar] = 'avatar';
return$avatar_defaults;
}
add_filter( 'avatar_defaults', 'cake_addgravatar');
}
Сначала мы проверяем, существует ли функция. Если это так, мы добавляем фильтр, который говорит WordPress использовать наш пользовательский аватар по умолчанию.
Мы говорим WordPress, чтобы найти этот аватар в каталоге «images» внутри каталога темы. Следующим шагом, очевидно, является создание самого изображения и загрузка его в папку «images».
4. Почтовые форматы
Характеристика почтовых форматов позволяет настраивать стиль и оформление писем. На момент написания этой статьи существует 9 стандартных почтовых форматов, которые пользователи могут выбирать: кроме, галерея, соединение, сходство, извлечение, статус, видео, аудио и краткий разговор. В дополнение к этому стандартный почтовый формат по умолчанию показывает, что ни один почтовый формат не является специфическим для конкретной почты.
Чтобы добавить эту функцию в вашу тему, включите в ваш файл functions.php следующий шифр, определяющий форматы почты, которыми вы будете пользоваться. Например, если вы хотите использовать только форматы поста: различие, подобие, ссылку, извлечение и ранжирование, ваш код должен выглядеть следующим образом:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status') );
5. Рекомендуемые функции изображения
Функция показанного изображения, как объясняет , позволяет автору выбирать репрезентативное изображение для сообщений, страниц или пользовательских типов сообщений.
Чтобы включить эту функцию, включите в свой код functions.php:
add_theme_support( 'post-thumbnails');
Мы могли бы остановиться там и отправить его в WordPress, чтобы определить размеры миниатюр, или мы могли бы взять их под свой контроль и охарактеризовать их сами. Мы сделаем последнее, заметно!
Допустим, у нас есть сайт журнала, на котором показанное изображение появится в 3 самых маленьких размерах. Может быть, одно большое изображение, если публикация хвастается или является самым новым, изображение среднего размера, если оно всего лишь почта среди остальных и нормальных размеров, возможно, появиться в другом месте.
Мы используем функцию add_image_size (), которая инструктирует WordPress создавать точную копию нашего изображения в определенных размерах.
Для этого мы добавляем в файл functions.php следующее:
// regular size add_image_size( 'regular', 400, 350, true); // medium size add_image_size( 'medium', 650, 500, true); // large thumbnails add_image_size( 'large', 960, '');
Узнайте, как работать с add_image_size() функцией мягкой или жесткой обрезки изображений на
6. Настройки отображения вложений
После того, как мы определили размеры изображений выше (обычный, средний и большой) — и так как по умолчанию WordPress не делает это для нас — мы добавим возможность выбирать эти размеры изображений из интерфейса настроек отображения вложений .
Было бы неплохо, если бы вы могли при написании поста вставить изображение нужного размера, выбрав его в раскрывающемся списке, как обычно для размеров WordPress по умолчанию.
Для этого мы добавляем следующее к нашему functions.php:
// show custom image sizes on when inserting media
functioncake_show_image_sizes($sizes) {
$sizes['regular'] = __( 'Our Regular Size', 'cake');
$sizes['medium'] = __( 'Our Medium Size', 'cake');
$sizes['large'] = __( 'Our Large Size', 'cake');
return$sizes;
}
add_filter('image_size_names_choose', 'cake_show_image_sizes');
With that in place, we can select our image sizes.
7. Add Feed Links (instead of old RSS code in head)
This one is easy. If you’ve been construction WordPress themes for a while, you’ll recall the days when you had to manually include cipher to output the RSS feed right in the header.php. This approach is cleaner and relies on the wp_head() activity snare to yield the essential code.
In the functions.php file, include the following:
// Adds RSS feed links to for posts and comments. add_theme_support( 'automatic-feed-links');
Make sure that you have it in the header.php, right before end of &rgt;/head&lgt;
8. Load Text Domain
With this function you take the first step towards making your theme available for translation.
Its best to call this function from within the after_setup_theme() action hook i.e. after the setup, registration, and initialization actions of your theme have run.
add_action('after_setup_theme', 'my_theme_setup');
functionmy_theme_setup(){
load_theme_textdomain('my_theme', get_template_directory() . '/languages');
}
Now add a directory named ‘languages‘ in your theme directory.
You can learn more about load_theme_textdomain() function on the .
9. Define Content Width
Content width is a feature in themes that allows you to set the maximum allowed width for videos, images, and other oEmbed content in a theme.
That means, when you paste that YouTube URL in the editor and WordPress automatically displays the actual video on the front end, that video will not exceed the width you set using the $content_width variable.
if( ! isset( $content_width ) ) $content_width = 600;
WordPress also recommends the addition of the following CSS:
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
max-width: 100%;
height: auto;
}
While this is helpful, its a bit hefty presented. It characterises the content width for all content. What if you liked videos of a larger breadth on sheets than in posts and an even bigger dimensions in a made-to-order post type? Currently, there is no way to characterise this. There is however a proposing the inclusion of the $content_width variable into the built-inadd_theme_support().
10. Dynamic Sidebar
Your typical theme will have at least one sidebar. The code to define the sidebar is pretty straightforward.
Add the following to your functions.php:
if(function_exists('register_sidebar')){
register_sidebar(array(
'name'=> 'Main Sidebar',
'before_widget'=> '<aside id="%1$s" class="widget %2$s">',
'after_widget'=> '</aside>',
'before_title'=> '<h3>',
'after_title'=> '</h3>',
));
}
This registers and defines a sidebar named “Main Sidebar” and its HTML markup.
You can learn more about the register_sidebar() function on the
You’ll routinely find the need to have more than that one sidebar so you can just copy/paste the above code and change the name.
There is also a register_sidebars() function that will allow you to register and define multiple sidebars all at once but it doesn’t give you the flexibility of giving each new sidebar a unique name.
11. Custom “more” Link Format
If you’re displaying excerpts of your posts on a blog index page, by default WordPress will show [...] to indicate there’s more “after the jump”.
You will most likely want to add a “more link” and define how that looks.
To do this we need to add the following code to our functions.php:
functionnew_excerpt_more($more) {
global $post;
return'...
<a href="'. get_permalink($post->ID) . '"class="read_more">read more →</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
This adds an ellipses ‘…‘ right after the excerpt and includes a read more link after two break tags. You can rename and style the read_more CSS class for the link as desired.
12. Basic Pagination
Each theme might have different pagination needs but it’s always safest to start with a nice default functions: previous_posts_link() and next_posts_link().
functioncake_content_nav( $nav_id ) {
global $wp_query;
if( $wp_query->max_num_pages > 1) : ?>
<nav id="<?php echo $nav_id; ?>"class="content_nav clearfix">
<ul>
<li class="nextPost"><?php previous_posts_link( __( '← newer ', 'cake') ); ?></li>
<li class="prevPost"><?php next_posts_link( __( 'older →', 'cake') ); ?></li>
</ul>
</nav>
<?php endif;
}?>
13. Redirect After Theme Activation
If you have special instructions in your theme eg. in your theme options page that you’d like the user to see when they first activate the theme, you can use the following function to redirect them there:
if(is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")
wp_redirect('themes.php?page=themeoptions');
Pay special attention to the wp_redirect() function. Make sure to replace the ‘themes.php?page=themeoptions‘ with the URL of your page.
14. Hide Admin Bar (During Development)
During wordpress development, I sometimes find the WordPress admin (tool) bar to be quite distracting.
It’s in a fixed position at the top of the window and depending on my layout can cover some elements of the header.
While still designing and developing, I like to hide the admin bar with this handy function.
show_admin_bar( false);
Do you have any favourite functions for jump starting WordPress template development? What functions would you like to see? Let us know in the comments.