Записки WEB Мастера

О создании сайтов, блогов. WordPress, WEB Дизайн

Заметки

Выводим информацию об авторе виджетом из консоли

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

Вообще, что бы вывести информацию об авторе поста логично использовать функцию «get_the_author_meta()» и вывести содержимое нужного поля со страницы «Профиль» внизу поста. Это может быть «Имя, Фамилия, Биография , Gravatar» и так далее…

А если уже имеющихся полей в профиле пользователя не достаточно, то можно добавить свои, например «Название компании, адрес компании» и так же вывести их в любой части сайта и все будет работать!

Но мы пойдём другим путём. Мы будем баловаться «Опциями».

Саму идею вывести информацию об авторе при помощи «Опций» стоит расценивать как пример. Ниже приведённый код для реализации всей этой задумки можно использовать в других целях.

Если Вы создаёте «сайт на заказ» то не будете же Вы добавлять поле, например «Название компании» в профиль пользователя! Гораздо лучше для этого организовать виджет да так, что бы он был на виду. Для этого, главная страница админ-панели как раз подходит.

Помимо самого виджета можно сделать отдельную страницу в админ-панели. Назвать её «настройки сайта» где можно разместить сколько угодно полей и дать возможность заказчику самостоятельно менять любой текст на сайте, или ещё что-нибудь, без необходимости копаться в кодах.

Одним словом, нужно «на рулить» удобство для заказчика, ну или для себя – и это круто! Давайте посмотрим, как это сделать на примере вывода информации об авторе записи.

Выводим информацию об авторе в конце каждой записи.

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

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



Весь код можно строчить в файле «functions.php» либо создать отдельный файлы в папке с темой и добавить его в «functions.php» вот так  «include(FileName.php’);» Собственно приступим, и первым делом зарегистрируем новый виджет.

// Регистрация виджета
add_action( 'wp_dashboard_setup', 'profile_user' );
function profile_user() {
	wp_add_dashboard_widget( 'profile_user_id', 'Виджет об авторе', 'new_fun' );
}
// И сразу объявим пустую функцию new_fun()
 
function new_fun() {
  
}

Давайте откроем админ-панель и посмотрим, что  у нас получается на данный момент. Как видим виджет готов, но он пока ещё пустой.

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

Теперь давайте опишем функцию.

function new_fun() {
$options = get_option( 'sozial' );
//print_r ($options);
 
?>
<div class="wrap">
  <h2>Информация об авторе</h2>
  <p>Введите основную информацию об авторе статей и она будет отображаться под каждой записью. И это так круто)))</p>
  <hr>
	<form action="options.php" method="post">
    <?php settings_fields( 'sozial_group' ); ?>
 
<table class="form-table">
	<tbody>
        <tr>
            <th><label for="category_base">Ссылка на фото</label></th>
            <td> <input name="sozial[url_foto]" id="category_base" type="text" value="<?php echo esc_attr($options['url_foto']); ?>" class="regular-text code"></td>
        </tr>
 
        <tr>
            <th><label for="tag_base">Имя автора статей</label></th>
            <td> <input name="sozial[name_user]" id="tag_base" type="text" value="<?php echo esc_attr($options['name_user']); ?>" class="regular-text code"></td>
        </tr>
 
        <tr>
            <th><label for="tag_base">TEST</label></th>
            <td> <input name="sozial[TEST]" id="tag_base" type="text" value="<?php echo esc_attr($options['TEST']); ?>" class="regular-text code"></td>
        </tr>
 
        <tr>
            <th><label for="tag_base">Об авторе</label></th>
            <td> <textarea name="sozial[text_user]" rows="10" cols="50" class="large-text code"><?php echo esc_attr($options['text_user']); ?></textarea>
        </tr>
	</tbody>
</table>
<?php submit_button(); ?>
	</form>
</div>
<?php
}

Теперь если снова заглянуть в админ-панель, то можно увидеть, что появились поля ввода и кнопка «Сохранить изменения». Но пока ничего не работает, поскольку мы только оформили внешний вид.

HTML код формы был попросту выдран с другой страницы настроек WordPress. Были изменены только атрибуты «name и value». К ним мы вернёмся чуть позже, когда пойдёт речь о том, как все данные вывести на сайте.

Обратите внимание, у нас имеется функция «settings_fields()» которая находится внутри тега «form». Её задача правильно обработать форму и позаботится о безопасности. Функция должна работать в связке с register_setting() которая  регистрирует новую опцию и собственно обрабатывает её значения. Запишем её.

add_action( 'admin_init', 'sozial_group_settings' );
function sozial_group_settings(){
	register_setting( 'sozial_group', 'sozial');
}

Заметьте, что первый параметр «sozial_group» должен совпадать с параметром функции » settings_fields()» Второй параметр «sozial» берётся из атрибута «name» полей ввода.

Проверяем как все работает и выводим информацию на сайте

На этом этапе уже все готово. Теперь мы можем заполнить поля и посмотреть, как все работает. В функции new_fun() сразу, где объявлена переменная «$options» допишем «print_r ($options);» что бы сразу увидеть результат.

Отлично, все работает! теперь осталось вывести информацию об авторе на сайте. Для этого нужно отредактировать, как вы понимаете файл «single.php» и в удобном для Вас месте добавить HTML разметку. У меня она выглядит вот так.

<?php  $options = get_option( 'sozial' );?>
<div class="single-autor">
  <img src="<?php echo esc_attr($options['url_foto']); ?>" alt="">
    <h4><?php echo esc_attr($options['name_user']); ?></h4>
    <p><?php echo esc_attr($options['text_user']); ?></p>
</div>

Воспользуемся, как не странно функцией «get_option()» и получим значение настройки «sozial» в переменную «$options». Теперь можно все это дело вывести на сайте, как показано выше. И обязательно используйте функцию «esc_attr()» при выводе инфы на сайте.

<?php echo esc_attr($options['url_foto']); ?>         // ссылка на фотографию
<?php echo esc_attr($options['name_user']);? >   // Имя автора
<?php echo esc_attr($options['text_user']); ?>      // Текст об авторе

Как добавить своё поле? Все просто! Скопируйте кусок HTML и замените значения массива на свой. Например «sozial[name_user]» на «sozial[TEST]» теперь это поле можно вывести на сайте «$options[‘ TEST ‘]».

<tr>
   <th><label for="tag_base">TEST</label></th>
   <td> <input name="sozial[TEST]" id="tag_base" type="text" value="<?php echo esc_attr($options['TEST']); ?>" class="regular-text code"></td>
</tr>

Готово.

Вот чуть не забыл. Давайте добавим страницу настроек в раздел меню «Настройки».

// добовляем страницу настроек в меню админки.
add_action ('admin_menu', 'new_menu');
    function new_menu(){
    add_options_page( 'это title', 'SETTING', 'manage_options', 'test_options', 'new_fun' );
}

Теперь в разделе «Настройки» появится новый пункт меню под названием «SETTING». То есть у нас получается такая картина. Мы добавили не только виджет но и страницу для наших настроек. Как я говорил выше, идея вывести информацию об авторе в конце поста была лишь примером как можно работать с настройками.

Комментариев пока нет

Оставить комментарий

Обязательно с протоколом http или https.