Створюємо плагін для зворотного зв'язку з WordPress авторами

WordPress - одна з найпопулярніших CMS у світі. Найчастішим способом її використання є створення персональних блоґів. Але також набирає популярність і створення колективних блогів, де авторів кілька. Більшість авторів на таких блогах – експерти у різних галузях діяльності. І у користувачів з'являється чудова можливість особисто зв'язатися з конкретним автором, поставити їм питання та навчитися чогось нового.

Тож у цій статті я покажу вам, як на своєму колективному блозі організувати процес зворотного зв'язку з авторами. Для цього нам знадобиться створити свій плагін, який відображає інформацію про автора та дає можливість з ним зв'язатися. Отже, почнемо.

1. Створюємо файл плагіна

Створення нового плагіна буде досить простим. Просто перейдіть до папки з плагінами всередині папки WP-зміст і створіть там підпапку з ім'ям вашого плагіна. У плагіні створіть головний файл PHP. У ньому у верхній частині треба буде розмістити інформацію про новий плагін, ця інформація буде використовуватися для того, щоб WordPress "пізнав" плагін і включив його до секції адміністрування.

Своєму плагіну я дав ім'я WP Webhost Author Info. Наведений нижче код буде відображати інформацію про плагін, яка потрібна для включення його, і цю інформацію треба додати в головній частині файлу:

/*
  Plugin Name: WP Webhost Author Info
  Plugin URI: http://www.wpwebhost.com/
  Description: Show author information and related author post with author contact option
  Version: 1.0
  Author: Rakhitha Nimesh
  Author URI: 
  License: GPLv2 or later
 */

Ім'я плагіна (параметр Назва плагіна) є обов'язковим, т.к. без нього WordPress "не побачить" ваш плагін у списку доступних. Інші параметри, зазначені у коді, є опціональними. Але включення їх покращить роботу та надійність плагіна. Тепер перейдемо від створення файлу плагіна до створення блоку даних автора.

2. Виводимо інформацію про автора

У блоці з даними автора треба увімкнути фотографію автора, ім'я автора та його короткі дані. Давайте подивимося, які вбудовані функції нам знадобляться, щоб зібрати всю цю інформацію, обробити її та вивести для конкретного посту.

У WordPress є функція get_the_author_metaяка використовується для виведення будь-якої інформації про користувача. Давайте подивимося на те, як виглядає наша функція, яка виводить дані про автора посту:

function wpwh_get_author_information() {

    $wpwh_html = '';

    $wpwh_post_author = get_the_author_meta('user_email');

    $wpwh_html = "<div id='author_box'>
                        <div id='author_gravatar'>" . get_avatar(get_the_author_email(), '80') . "</div>
                        <div id='author_name'>" . get_the_author_meta('first_name') . " " . get_the_author_meta('last_name') . "</div>
                        <div id='author_desc'>" . get_the_author_meta('description') . "</div>
                      </div>";

    return $wpwh_html;
}

• Я назвав цю функцію wpwh_get_author_information. В одному блозі можна завести багато плагінів для виведення інформації. Отже, функції, змінні, класи з однаковою назвою можуть конфліктувати між собою. Завжди краще привласнити кожній окремий префікс. Я використовував wpwh як такий префікс.
• HTML-код блоку з інформацією автора зберігається у змінній $wpwh_html.
• Фото автора ми отримаємо за допомогою функції get_avatar. Email автора та розмір відображення картинки в пікселях передаються цій функції. А функція поєднує дані з картинкою, отриманою з gravatar.comна основі адреси електронної пошти.
• Далі ім'я та прізвище зводимо воєдино за допомогою функції get_the_author_metа.
• Потім описовим параметром задаємо запит на отримання інформації про автора в розділі "Біографія".
• І, нарешті, вся зібрана інформація видається у форматі HTMLЯк при цьому працює наша основна функція - я розповім вам трохи пізніше.

3. Включаємо відображення недавніх постів конкретного автора

Закінчивши читання цікавої статті, само собою, ми захочемо дізнатися більше про те, хто цю цікаву статтю написав. А ще ми цілком можемо спалахнути бажанням прочитати й інші статті цього ж автора або найкращі його публікації. Тож таку інформацію буде не зайвим внести до авторського профілю. Для цього у нас зазвичай використовуються рубрики на кшталт "Останні записи" та "Популярні записи". Додати до них автора буде чудовим рішенням.

Для цього в базі даних постів потрібно буде створити наступну функцію, яка обирає посади конкретного автора:

function wpwh_get_author_posts() {
    global $authordata, $post;

    $wpwh_html = "";

    $wpwh_author_posts = get_posts(array('author' => $authordata->ID,
                'post__not_in' => array($post->ID),
                'posts_per_page' => 5));

    foreach ($wpwh_author_posts as $key => $wpwh_author_post) {

        if (has_post_thumbnail($wpwh_author_post->ID)) {
            $wpwh_html .= "<div style='float:left'><div class='author_post_img'>" . get_the_post_thumbnail($wpwh_author_post->ID, array(100, 100)) .
                        "</div><div id='post_title'>$wpwh_author_post->post_title</div></div>";
        } else {
            $url = plugins_url();
            $wpwh_html .= "<div style='float:left'><div class='author_post_img'><img src='" . $url . "/wd-author-posts/default.jpg' />
                        </div><div id='post_title'>$wpwh_author_post->post_title</div></div>";
        }
    }

    if($wpwh_html != ''){
        $wpwh_html = "<div id='post_head'>Recent Posts from Author</div><div id='post_list'>".$wpwh_html."</div>";
    }

    return $wpwh_html;
}

Наведений вище код задаватиме запит на виведення добірки недавніх постів від конкретного вибраного автора.

Я наведу роз'яснення кожної секції коду, т.к. тут є деякі класні моменти, про які вам буде корисно знати.

3.1. Створюємо запит на посади WordPress

$wpwh_author_posts = get_posts(array('author' => $authordata->ID,
                'post__not_in' => array($post->ID),
                'posts_per_page' => 5));

Ви можете використовувати функцію get_posts для запиту добірки постів за конкретними параметрами. У масиві параметрів я ставив умови як параметр автор (Для вибору конкретного автора), post__not_in для виключення поточного посту та posts_per_page для виведення тільки 5 постів на сторінці. Інші параметри та умови ви можете знайти у WordPress Codex.

3.2. Розміщуємо картинки попереднього перегляду для постів

get_the_post_thumbnail($wpwh_author_post->ID, array(100, 100));

Ви можете завантажити зображення, яке буде відображатися разом з постом у секції попереднього перегляду та супроводжуючих картинок після створення посту. Для цього потрібна функція get_the_post_thumbnail — вона дозволяє вибирати для перегляду зображення різного розміру. Більше подробиць щодо роботи цієї функції get_the_post_thumbnail.

Тепер подивімося на повний варіант коду, який згадувався раніше.

• Пости отримані із загальної маси публікацій за допомогою функції get_posts і кожного заданий цикл.
• Всередині циклу ми перевіряємо, чи супроводжуюча картинка для посту за допомогою функції has_post_thumbnail. Зображення за умовчанням призначається для поста в тому випадку, якщо публікація не має власного великого зображення.
• Ми використовуємо функцію get_the_post_thumbnail для отримання зображення та створення простого контейнера DIV, який включатиме всі вибрані пости.

4. Вказуємо контактні дані автора для зв'язку з ним

Тут починається найважливіша частина плагіна, оскільки за допомогою нього зрештою ми повинні зв'язуватися з автором для прямого спілкування та обміну досвідом. Важливо врахувати, що не всі користувачі автори захочуть, щоб з ними контактували безпосередньо. Отже, доведеться передбачити опцію, завдяки якій автор може сам вирішити, чи хоче він, щоб йому писали, чи ні.

4.1. Налаштовуємо авторський профіль у WordPress

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

add_action('show_user_profile', 'wpwh_email_preferences');
add_action('edit_user_profile', 'wpwh_email_preferences');

є 2 параметри під назвою show_user_profile и edit_user_profile, які відносяться до створення профілю та редагування його відображення на екрані. Щоразу, коли використовується один із таких параметрів, ми викликаємо функцію wpwh_email_preferences, що генерує поля, що настроюються:

<?php

function wpwh_email_preferences($user) {

    $wpwh_email_status = (esc_attr(get_the_author_meta('wpwh_email_contact', $user->ID)) != 'allow') ? '' : 'checked';
?>
    <h3>Email Preferences</h3>
    <table class="form-table">
        <tr>
            <th>
                <label>Allow Email Contact</label></th>
            <td>
                <input type="checkbox" name="wpwh_email_contact" id="wpwh_email_contact"
                       value="allow" <?php echo $wpwh_email_status; ?> /><br />
            </td>
        </tr>
    </table>
<?php

Ми повинні використовувати значення параметра, що настроюється мета для користувача, щоб зберегти в налаштуваннях електронну адресу автора. Я визначаю це налаштування ключем wpwh_email_contact, він зберігається в таблиці wp_usermeta. Трохи докладніше зупинимося на роз'ясненні коду.

• Спочатку ми перевіряємо значення для wpwh_email_contact. За замовчуванням воно буде порожнім.
• Потім ми створюємо відповідний HTML для відображення у полі.
• прапорець ми використовуємо для того, щоб вибрати параметр: дозволити контакт із автором чи ні.

Тепер у нас є поля, що настроюються для опцій контактного блоку, давайте подивимося, як ми можемо зберегти їх значення після створення авторського профілю або його модифікації:

add_action('personal_options_update', 'wpwh_save_email_preferences');
add_action('edit_user_profile_update', 'wpwh_save_email_preferences');

Як ми й раніше робили, тут є 2 параметри для виклику функції після створення профілю або зміни:

function wpwh_save_email_preferences($user_id) {
    if (!current_user_can('edit_user', $user_id))
        return FALSE;
    update_usermeta($user_id, 'wpwh_email_contact', $_POST['wpwh_email_contact']);
}

Ми викликаємо функцію wpwh_save_email_preferences після кожного оновлення профілю. Спочатку перевіряємо, чи має поточний користувач право на модифікацію свого профілю. А потім записуємо мета-параметр до бази даних після оновлення.

Коли ми закінчили зі створенням та збереженням налаштувань електронної пошти для автора, настав час для ajax-функцій, які дозволять надсилати листи нашим авторам від читацької аудиторії.

4.2. Створюємо форму для надсилання електронних листів

Нам треба створити просту форму для надсилання листів. Спочатку вона не повинна бути видимою. Після того, як читач натисне на посилання "Зв'язатися з автором", ця форма і повинна з'являтися на сторінці. У користувачів при цьому не буде можливості побачити форму для тих авторів, які вирішили відключити відправлення та отримання листів".

function wpwh_send_email_box() {
    global $authordata;

    $wpwh_email_status = get_the_author_meta('wpwh_email_contact', $authordata->ID);

    $wpwh_html = '';

    if ($wpwh_email_status == 'allow') {
        $wpwh_html = '
    <p><a href="javascript:void(0)" onclick="toggle_email();">Contact Author</a></p>
    <div id="email_panel">
    <div id="errDiv"></div>
    <div id="sucessDiv"></div>
    <table class="author_emails">
        <tr>
            <th>
                <label>Your Email</label></th>
            <td>
                <input type="text" name="wpwh_email" id="wpwh_email" />
            </td>
        </tr>
        <tr>
            <th>
                <label>Subject</label></th>
            <td>
                <input type="text" name="wpwh_subject" id="wpwh_subject" />
            </td>
        </tr>
        <tr>
            <th>
                <label>Your Message</label></th>
            <td>
                <textarea name="wpwh_message" id="wpwh_message" ></textarea>
            </td>
        </tr>
        <tr>
            <th>
                <label></label></th>
            <td>
                <input type="hidden" id="wpwh_author_id" value="'.$authordata->ID.'" />
                <input type="button" value="Send" id="send_author" onclick="contactus()" />
            </td>
        </tr>
    </table></div>';
    }

    return $wpwh_html;
}

4.3. Налаштовуємо скрипти та стилі

Щоб додати Аяксанам потрібні функції jquery. Ця секція буде присвячена тому, як правильно включити скрипти та стилі у вашому плагіні для зв'язку з авторами.

function wpwh_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('wpwh_functions', plugins_url('/functions.js', __FILE__), 'jquery');
    wp_enqueue_style('wpwh_style', plugins_url('/styles.css', __FILE__));
}

add_action('wp_enqueue_scripts', 'wpwh_scripts');

Є параметр wp_enqueue_scripts, він використовується в скриптах та стилях. Оскільки jquery вбудований у WordPress, нам треба включити його, використовуючи wp_enqueue_script('jquery')

Для настроюваних скриптів нам треба вказати унікальне ім'я та шлях до файлу js так, як було продемонстровано вище.

Стилі можна увімкнути за допомогою функції wp_enqueue_style.

4.4. Додаємо сумісність з Ajax

Ajax вмикається за допомогою деяких спеціальних функцій. Давайте додамо його функціональність до нашої форми зв'язку за допомогою електронної пошти:

add_action('wp_ajax_wpwh_email_action', 'wpwh_email_callback');
add_action('wp_ajax_nopriv_wpwh_email_action', 'wpwh_email_callback');

WordPress надає 2 параметри: wp_ajax и wp_ajax_nopriv. Вам слід вказати ім'я для дії та функцію виклику цієї дії так, як було показано вище. Користувачі, що увійшли під своїм логіном, використовують wp_ajaxа інші можуть застосовувати wp_ajax_nopriv.

Отже, створюємо функцію відправки email:

function wpwh_email_callback() {
    global $authordata,$wpdb;

    $contact_subject = $_POST['wpwh_subject'];
    $contact_email = $_POST['wpwh_email'];
    $contact_message = $_POST['wpwh_message'];
    $author_id = $_POST['wpwh_author'];

    $msg = "Name : $contact_name rn Email : $contact_email rn Messsage : $contact_message ";

    $author_email = get_the_author_meta('user_email', $author_id);

   if(wp_mail($author_email , $contact_subject, $msg)){
        echo "Message Sent Successfully";
   }else{
        echo "Message Sending Failed";
   }

    exit;
}

Ця функція каже сама за себе. Ми просто додаємо значення електронної пошти у форму за допомогою $ _ POST та надсилаємо лист за допомогою функції wp_mail.

4.5. Завершуємо роботу над новим плагіном

Я пояснив вам функції плагіну та процедуру їх використання. Плагін містить файл js під назвою functions.js, який використовується для валідації електронної адреси у формі та створення ajax-запиту. Подивіться на файл functions.js - І ви легко зрозумієте структуру коду.

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

function wpwh_generate_author_box($content) {

    if (is_single ()) {
        $wpwh_author_info = wpwh_get_author_information();

        $wpwh_author_posts = wpwh_get_author_posts();

        $wpwh_email_box = wpwh_send_email_box();

        $wpwh_html = "<div id='author_panel'>" . $wpwh_author_info . $wpwh_email_box . $wpwh_author_posts . "</div>";
        return $content . $wpwh_html;
    } else {
        return $content;
    }
}

add_filter('the_content', 'wpwh_generate_author_box');

• Блок з інформацією про автора відображається кожному посту. Так що я використав фільтр the_content, який викликається після того, як завантажиться сам пост у блозі.
• Ми включаємо блок про автора лише у подробицях про пост на сторінці публікації. Так що для перевірки та підтвердження я використав функцію is_single.
• Потім ми викликаємо всі інші функції, описані вище, і додаємо код HTML наприкінці посту.

Сподіваюся, я доступно пояснив вам, як створити та налаштувати цей плагін своїми руками. Ви можете самостійно поекспериментувати з кодом, використовуючи різні типи інформації про авторів вашого блогу та стилі CSS.

Джерело:WPWebHost.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/