Java, UX, HTML, CSS, WEB-design

Простая настройка функциональности WordPress по умолчанию

Краткое описание по статье Простая настройка функциональности WordPress по умолчанию

Название: Простая настройка функциональности WordPress по умолчанию . Краткое описание: [ad_1] ⭐ Джозеф . Дата публикации: 17.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Джозеф Касабона

  • 0 Комментарии

Простая настройка функциональности WordPress по умолчанию

  • 11 минут чтения

  • WordPress, Темы, Учебники

Краткое резюме ↬

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

Изменить источник jQuery по умолчанию

Еще одна замечательная особенность WordPress заключается в том, что он заблокирован и загружен всеми видами библиотек JavaScript, включая jQuery. Это также дает вам возможность изменить источник этих библиотек в соответствии с вашими потребностями.

Дальнейшее чтение на SmashingMag:

  • Как разработчики коммерческих плагинов используют репозиторий
  • Основы WordPress: как создать плагин WordPress
  • Руководство по стандартам кодирования WordPress
  • Написание модульных тестов для плагинов WordPress

Еще после прыжка! Продолжить чтение ниже ↓

Допустим, мы хотим снять нагрузку с нашего сервера, переключив версию jQuery WordPress на размещенное решение (или CDN версия). Мы можем очень легко изменить источник jQuery с помощью этой функции:

function add_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://code.jquery.com/jquery-1.7.1.min.js');
    wp_enqueue_script( 'jquery' );
}

add_action('wp_enqueue_scripts', 'add_scripts');

Здесь происходят три вещи. Во-первых, мы используем wp_deregister_script() чтобы сообщить WordPress забыть об используемой в настоящее время версии jQuery. Затем мы используем wp_register_script() для перерегистрации jQuery (в качестве имени сценария), используя собственную версию CDN jQuery. Наконец, мы используем wp_enqueue_script() чтобы добавить jQuery в нашу тему или плагин.

Здесь следует отметить, что мы используем add_action()нет add_filter(), чтобы добавить наши скрипты. Поскольку мы не вносим никаких изменений в контент, а вместо этого полагаемся на то, что WordPress сделает что-то для загрузки наших скриптов, мы используем хук действия, а не хук фильтра. Прочитайте об обоих в Кодексе WordPress.

Добавить размеры изображения

Мы знаем, что WordPress устанавливает несколько разных размеров для изображений, которые мы загружаем. Знаете ли вы, что вы также можете (относительно легко) установить свои собственные размеры изображения? И все это с помощью двух простых функций. Если у нас есть пользовательское изображение заголовка для наших сообщений с размерами 760 × 300 пикселей, мы можем заставить наши изображения загружаться в этот размер с помощью этого:

add_theme_support( 'post-thumbnails' );
add_image_size( 'post-header', 760, 300, true );

Первая функция, add_theme_support(), говорит WordPress разрешать не только миниатюры, но и рекомендуемые изображения и изображения новых размеров. Вторая линия, add_image_size(), где мы добавляем наш новый размер. Эта функция принимает четыре аргумента: имя, ширину, высоту и необходимость обрезки изображения. WordPress также настоятельно рекомендует не использовать определенные зарезервированные имена (читай: не используйте их): thumb, thumbnail, medium, large а также post-thumbnail.

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

if ( has_post_thumbnail() ){
  the_post_thumbnail( 'post-header' );
}

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

if ( has_post_thumbnail() ){
  the_post_thumbnail( 'post-header' );
}else{
  <img src="'. IMAGES .'/default.jpg" alt="Post Header Image" />
}

В этом случае, если у сообщения нет миниатюры, оно возвращается к изображению по умолчанию. Ура, преемственность!

Изменить разметку боковой панели

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

register_sidebar( array (
  'name' => __( 'Sidebar', 'main-sidebar' ),
  'id' => 'primary-widget-area'
));

WordPress применит для нас разметку по умолчанию, которую мы можем стилизовать по своему усмотрению. Однако мы также можем добавить собственную разметку и стилизовать ее по своему усмотрению. Я предпочитаю использовать элементы div для виджетов боковой панели, потому что они более семантически правильны, чем элементы списка. я тоже предпочитаю h3 для заголовков виджетов, потому что я обычно резервирую h2 для заголовка сообщения в блоге. Итак, имея это в виду:

register_sidebar( array (
  'name' => __( 'Sidebar', 'main-sidebar' ),
  'id' => 'primary-widget-area',
  'description' => __( 'The primary widget area', 'wpbp' ),
  'before_widget' => '<div class="widget">',
  'after_widget' => "</div>",
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );

Это создает боковую панель, которая выглядит следующим образом:


Боковая панель с разметкой. Разве панель инструментов веб-разработчика не великолепна? (Просмотреть изображение.)

Изменить частоту обновления виджета RSS

Встроенный в WordPress виджет RSS просто фантастический, но иногда он не обновляется достаточно часто. К счастью, для этого есть довольно простое решение. Просто добавьте этот код в свой functions.php файл:

add_filter( 'wp_feed_cache_transient_lifetime',
   create_function('$a', 'return 600;') );

Как видите, мы используем WordPress. add_filter() функция, которая принимает обработчик фильтра, функцию обратного вызова и (необязательно) приоритет. То wp_feed_cache_transient_lifetime hook обрабатывает частоту обновления канала. Мы создаем нашу функцию обратного вызова на лету, используя PHP create_function() функция. Это одна строка, которая возвращает частоту обновления в секундах. Наша частота обновления установлена ​​​​на 10 минут.

Добавьте контент в RSS-канал

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

function add_to_feed($content){
   $content .= "<p>Thanks for Subscribing! You're the best ever!</p>";
   return $content;
}

add_filter( "the_content_feed", "add_to_feed" );

Использование фильтра the_content_feed, который вызывается только при создании канала, мы используем функцию обратного вызова для добавления новой информации к содержимому сообщения. Если бы мы посмотрели ленту нашего веб-сайта в Google Reader, то увидели бы это:

Вот наше сверхсекретное сообщение всем подписчикам.
Вот наше сверхсекретное сообщение всем подписчикам. (Просмотреть изображение.)

Выделите комментарии автора

Одна довольно распространенная практика — отделять комментарии автора от комментариев читателей. Я делаю это в своем блоге:

В последнее время мой блог малоактивен.
В последнее время мой блог малоактивен. (Просмотреть изображение.)

Итак, как нам это сделать? Я рад, что вы спросили! Видите ли, в мире до версии 2.7 требовалось специальное кодирование, чтобы определить, совпадает ли идентификатор автора с идентификатором комментатора. В своем блоге я просто проверял, равен ли идентификатор комментатора 1, который был идентификатором администратора. Не очень хорошо знаю, но я был молод и наивен (как и единственный автор блога).

Версия 2.7+ имеет причудливую маленькую функцию под названием wp_list_comments, который печатает для нас комментарии к сообщению. Более того, он применяет класс .bypostauthor к любым комментариям — как вы уже догадались — автора поста. Теперь, чтобы изменить стиль комментариев автора, все, что нам нужно сделать, это:

.comment { /* Reader comments */
   background: #FFFFFF;
   color: #666666;
}

.bypostauthor { /* Author comments */
   background: #880000;
   color: #FFFFFF;
}

Сделанный! Легко, верно?

Наконечник: Если вам не нравится, что WordPress сообщает вам, какую разметку использовать в разделе комментариев, вы можете указать ему использовать собственную функцию печати:

<ul class="commentlist">
  <?php wp_list_comments('type=comment&callback=my_comment_display'); ?>
</ul>

Затем вы создаете функцию с именем my_comment_display(), который печатает ваши комментарии так, как вы считаете нужным. Подробнее об этом в Кодексе.

Изменить опубликованный контент

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

function sig_to_content($content){
   $content .= '<p><img src="'. IMAGES .'/sig.png" alt="Joseph L. Casabona" /></p>';
   return $content;
}

add_filter( "the_content", "sig_to_content" );

К настоящему времени вы получаете повесить add_filter() и функции обратного вызова. В данном случае наш фильтр the_content. Это добавит подпись в конец как сообщений, так и страниц. Чтобы отфильтровать страницы, мы просто добавляем это условие:

function sig_to_content($content){
   if(is_single()){
      $content .= '<p><img src="'. IMAGES .'/sig.png" alt="Joseph L. Casabona" /></p>';
      return $content;
   }
}

Эта функция, is_single()проверяет, просматриваем ли мы один пост (в отличие от статуса отношения содержимого).

Создайте собственный шаблон для таксономии

Я начал использовать WordPress еще в 2004 году, до того, как появились страницы, плагины или расширенное редактирование. Думая о его эволюции в удивительно гибкую платформу, я помню, как делал пользовательские вещи с определенными категориями и тегами, используя if заявления в single.php файл шаблона. Сейчас намного проще.

WordPress имеет невероятно сложную иерархию шаблонов. Все возвращается к index.phpа такие шаблоны, как page.php а также single.php отображать различные типы контента по-разному. Но вы могли бы уточнить с category.php и даже home.php. Как вы можете себе представить, home.php будет вашей домашней страницей, и category.php будет отображать соответствующие сообщения, когда посетитель просматривает страницу категории. Чего вы, возможно, не знаете, так это того, что вы можете получить конкретную категорию. Создав страницу шаблона с именем category-[slug].php или category-[id].php (то есть, например, category-news.php или category-6.php), вы говорите WordPress: «Используйте этот шаблон специально для этой категории». я обычно копирую index.php или category.php и модифицировать их.

В той же заметке вы можете настроить панель поиска, создав страницу шаблона с именем searchform.phpкоторый будет включать только форма поиска. По умолчанию (т.е. когда нет searchform.php), вот что мы смотрим:

<form role="search" method="get" id="searchform" action="<?php echo home_url( "https://www.smashingmagazine.com/" ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

Панель поиска по умолчанию
Панель поиска по умолчанию. (Просмотреть изображение.)

Мне нравится удалять кнопку и метку и предлагать пользователю нажать «Enter» для поиска. Мы можем сделать это, просто создав searchform.php файл шаблона и добавление кода. Вот файл целиком:

<!--BEGIN #searchform-->
<form class="searchform" method="get" action="<?php bloginfo( 'url' ); ?>">
  <input class="search" name="s" onclick="this.value=’" type="text" value="Enter your search" tabindex="1" />
<!--END #searchform-->
</form>

Наша новая панель поиска после некоторой магии CSS
Наша новая панель поиска после некоторой магии CSS. (Просмотреть изображение.)

Настройте экран входа в WordPress

Есть несколько способов сделать это, в основном с помощью плагинов. Во-первых, давайте рассмотрим способ настройки логотипа входа (и URL-адреса логотипа) с помощью нашей собственной темы. Настроить URL-адрес логотипа легко. Просто добавьте этот код в свой functions.php файл:

add_filter('login_headerurl',
  create_function(false,"return 'https://casabona';"));

Как и в случае с частотой обновления для нашего виджета RSS, мы комбинируем add_filter() а также create_function() возвращать другой URL-адрес (в данном случае мою домашнюю страницу), когда login_headerurl крючок называется. Изменение изображения логотипа теоретически то же самое, но требует небольшой дополнительной работы:

add_action("login_head", "custom_login_logo");

function custom_login_logo() {
  echo "
  <style>
  body.login #login h1 a {
    background: url('".get_bloginfo('template_url')."/images/custom-logo.png') no-repeat scroll center top transparent;
    height: 313px;
    width: 313px;
  }
  </style>
  ";
}

Видишь ли, у нас есть крючок (login_head) и функцию обратного вызова (custom_login_logo()), но вместо add_filter()мы используем add_action(). Разница между ними заключается в том, что, хотя add_filter() заменяет некоторый текст или значение по умолчанию, add_action() предназначен для выполнения некоторого кода в определенный момент во время загрузки WordPress.

В нашей функции обратного вызова мы перезаписываем CSS по умолчанию для логотипа (body.login #login h1 a) с изображением, которое мы загрузили в каталог нашей темы. Обязательно отрегулируйте высоту и ширину по мере необходимости. Получаем что-то вроде этого:

Это один красивый эскиз.
Это один красивый эскиз. (Просмотреть изображение.)

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

Бонус: сделайте заставку частью вашей темы

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

  1. Создайте новый файл в каталоге вашей темы с именем page-splash.php (хотя название не имеет значения).
  2. Добавьте разметку HTML и CSS и все, что вы можете использовать. Идея заключается в том, что разметка, CSS и макет страницы-заставки, вероятно, будут отличаться от остального веб-сайта.
  3. В верхней части page-splash.phpдобавьте следующее, которое сообщает WordPress, что это шаблон страницы: <php /* Template Name: Splash */ ?>
  4. Добавьте два тега, которые сделают вашу страницу готовой для WordPress. Где-то в голове (в идеале, рядом с </head>), Добавить <?php wp_head(); ?>. Прямо перед </body> отметить, добавить <?php wp_footer(); ?>. Сохрани это!
  5. Зайдите в панель администратора WordPress и создайте страницу, используя этот шаблон: шаблон по умолчанию
  6. После того, как вы сохранили страницу, перейдите к Settings → Reading, а в разделе «Отображение на первой странице» выберите переключатель «Статическая страница». Сделайте первую страницу созданной вами заставкой! заставка скриншот

Заключение

Вот оно! Более 10 модификаций, которые вы можете внести в WordPress с помощью хуков, функций и страниц шаблонов, о боже! Это те, которые я использую часто, но есть целый ряд хуков, чтобы делать все, от добавления классов тела до изменения заголовка перед его печатью. Гибкость и отсутствие необходимости модифицировать ядро ​​— вот что делает WordPress такой замечательной платформой! Какие ваши любимые советы? Дайте нам знать об этом в комментариях.

Другие источники

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

  • «API плагинов» Подробное описание действий и фильтров, а также список хуков.
  • «Теги шаблона» Все, что вы можете использовать в цикле.
  • «Иерархия шаблонов» Как раскрывается ваша тема.
Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Простая настройка функциональности WordPress по умолчанию

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»