Как добавлять таблицу рейтинга шорткодом в любом месте WordPress

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

Подготовка таблицы рейтинга

Для примера возьмём таблицу, на моём Цуписном рейтинговом сайте, вот так она выглядит:

Ниже привожу код HTML этой таблицы, ДЛЯ ПРИМЕРА и для тех, кто не знает как верстаются таблицы на HTML. Вы его уже переделаете под свои столбцы, со своими лого (кстати, все картинки, иконки, должны быть подготовлены заранее и загружены в соответствующую папку на сайт, путь к которой вы будете прописывать в таблице).

<table>
<thead class="tname"><tr><th class="rn">№</th><th>Букмекер</th><th class="rt">Рейтинг</th><th class="fr">Фрибет</th><th class="ob">Мин. деп.</th><th>Ссылка</th></tr></thead>


<tbody>



<tr>
<td class="rn"><div class="nb nb3">3</div></td>
<td><a class="srlnk" href="../paribet-bk/"><img class="srimgmain" src="../svg/logo/pari.svg" alt="Пари">Пари</a></td>
<td class="rt">????? / <strong>5.0</strong></td><td class="fr"><img src="../svg/gift.svg" class="gr" alt="Фрибет"> 2 000 р.</td>
<td class="ob"><img src="../svg/dollar.svg" class="gr" alt="Минимальный депозит"> 90 ?.</td>
<td class="rl"><a href="../go/parimatch.php" target="blank" rel="noopener" class="custom-btn mobbutton">Перейти</a></td>     </tr>

<tr>
<td class="rn"><div class="nb">4</div></td>
<td ><a class="srlnk" href="../leon-bk/"><img class="srimgmain" src="../svg/logo/leon.svg" alt="Леон">Леон</a></td>
<td class="rt">????? / <strong>4.7</strong></td><td class="fr"><img src="../svg/gift.svg" class="gr" alt="Фрибет"> 1 000 р.</td>
<td class="ob"><img src="../svg/dollar.svg" class="gr" alt="Минимальный депозит"> 200 ?.</td>
<td class="rl"><a href="../go/leon.php" target="blank" rel="noopener" class="custom-btn mobbutton">Перейти</a></td>        </tr>

<tr>
<td class="rn"><div class="nb">4</div></td>
<td ><a class="srlnk" href="../go/fonbet.php"><img class="srimgmain" src="../svg/logo/fonbet.svg" alt="Фонбет">Фонбет</a></td>
<td class="rt">????? / <strong>4.5</strong></td><td class="fr"><img src="../svg/gift.svg" class="gr" alt="Фрибет"> 15 000 р.</td>
<td class="ob"><img src="../svg/dollar.svg" class="gr" alt="Минимальный депозит"> 250 ?.</td>
<td class="rl"><a href="../go/fonbet.php" target="blank" rel="noopener" class="custom-btn mobbutton">Перейти</a></td>        </tr>

</tbody>
</table>

Как видно в коде, каждому столбцу задан свой класс, да и вообще почти всё что есть имеет свои классы стилей CSS, для того чтобы потом грамотно отформатировать её под мобильные устройства, какие-то столбцы можно убрать, уменьшить размеры и так далее. Свои стили я скидывать не вижу смысла, очень большой код под разные размеры экрана, достаточно того что выше скинул скрин самой таблицы. Звёздочки в коде заменились знаками вопроса почему-то, можете скопировать их из таблицы символов Unicod.

Как только подготовили код, можно проверить просто вставив его целиком в любом месте статьи, посмотреть как он отображается, и если всё норм, то переходим ко второму шагу.

Создание шорткода вызова таблицы

Тут всё очень просто, для создания шорткода вызова нашей таблицы, потребуется один файл шаблона WordPress — function.php, в котором нужно будет добавить следующие строки:

function my_rating() {
        return '
/** ВОТ ЗДЕСЬ ВСТАВЛЯЕМ HTML КОД ТАБЛИЦЫ */
';
    }
add_shortcode('table1', 'my_rating');

• my_rating — так мы назвали функцию, в которой записана таблица
• table1 — название шорткода, который будет вызывать функцию

Сохраняете все изменения в файле function.php и проверяете работоспособность нового шорткода, в теле любой записи вставляете: [table1], и при публикации, вместо шорткода появится наша таблица. Вот и вся песня, ничего сложного! Кому-то может удобней пихать тела таблиц целиком в тело статьи, но когда есть несколько вариантов различных таблиц для разных нужд (допустим одни офферы для бездепных статей, другие только топ5, третьи полный рейтинг и т.д.), то проще создать несколько шорткодов и в дальнейшем не париться.

Выводим динамический рейтинг в WordPress

А теперь вишенка на торте, используем вышеуказанный код простого добавления своего шорткода для добавления полноценного рейтинга в тело любой записи или страницы. Для этого необходимо чтобы все обзоры принадлежали одному ОТДЕЛЬНОМУ типу записи (создаётся собственный post type, предположим «casino_type», такой вариант и разберем на примере), либо просто находились в одной рубрике.

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

Подготавливаем таблицу

Для начала создадим отдельный файл в папке темы  ***/parts/loop-1.php и в нем сформируем кусок нашей таблицы, который отвечает за вывод одной позиции, с вот таким кодом:

<table class="mobiletable" style="width: 100%;"><tr><td class="tdimg" style="width: 11%;"><img class="imgtd" src="<?php echo get_field('icons_for_rating'); ?>" alt=""></td>
                
            <td style="width: 21%;">	<span style="font-weight:600;font-size:1.1em;color: #4a4a4a;"><?php the_title(); ?></span><br><?php if (get_field('field_bonus_offer')) { ?>
                <i style="color:#ff5a62;" class="fa fa-gift" aria-hidden="true"></i><span style="color:#256451;"> <?php echo get_field('field_bonus_offer'); ?></span><br><?php if (function_exists('wp_review_show_total')) wp_review_show_total(); ?>
                <?php	} ?><br></td>
                    
            <td style="width: 20%;" class="mobiletable1">	<span style="font-weight:600;color: #409178;">Details of the bonus:</span><br><span style="color:#129e37;"><i class="fa fa-credit-card" aria-hidden="true"></i></span> Min. deposit: <?php echo get_field('mindep_fdb'); ?><br><span style="color:#1db2cb;"><i class="fa fa-info-circle" aria-hidden="true"></i></span>
 Wager: <?php echo get_field('wager_fdb'); ?></td>
                    
                <td style="width: 25.6%;" class="mobiletable1"><i style="color:#268d84;" class="fa fa-check-square-o" aria-hidden="true"></i> Gamblers rating:<span style="color:#e98585;"><i class="fa fa-star" aria-hidden="true"></i> <?php echo get_field('wp_review_total'); ?></span><br><i style="color:#2fb2a7;" class="fa fa-check-square-o" aria-hidden="true"></i> Players rating: <span style="color:#e98585;"><i class="fa fa-star-half-o" aria-hidden="true"></i> <?php echo get_field('wp_review_user_reviews'); ?></span><span style="color:#b9b9b9;"> <i class="fa fa-user-secret" aria-hidden="true"></i> <?php echo get_field('wp_review_review_count'); ?></span><br><span style="color:#ccc">Popularity: <i class="fa fa-bolt" aria-hidden="true"></i> <?php echo get_field('views'); ?> <i class="fa fa-commenting-o" aria-hidden="true"></i> <?php comments_number('0', '1', '%'); ?></span></td> 
        
        <td class="mobiletable2" style="width: 8%;">	<a href="<?php the_permalink(); ?>" class="buttonmr">Review</a></td>
            <td style="width: 9%;">	<a href="<?php the_field('affiliate-url'); ?>" target="blank" class="buttonmp">Play <i  class="fa fa-angle-double-right" aria-hidden="true"></i></a></td></tr></table>

Как видите, здесь использовано много произвольных полей, опишу основные:

• icons_for_rating — логотип, в специальном размере загружаемый в обзор
• wp_review_show_total — общая оценка из плагина wp_review, в звездочках. Да, забыл сказать, на этом сайте подключен ещё плагин рейтинга, хотя сейчас я бы уже этого делать не стал, а просто использовал произвольные поля с рейтингом и вверстал из в обзор.
• wp_review_total — общая оценка в цифрах
• wp_review_user_reviews — общая оценка обзора от пользователей (внизу статьи есть звезды, которыми посетитель может оценить статью)
• wp_review_review_count — количество оценок пользователей
• views — количество просмотров статьи, автоматически считает с плагином WP-PostViews
• остальные информационные данные, вводятся вручную при заполеннии обзора

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

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

Формируем рейтинг и сохраняем шорткод

Имея готовую структуру вывода данных, теперь в наш будущий шорткод нужно подключить вывод цикла, используя функцию query_posts. Вот код, который у меня прописан в fuctions.php для добавления шорткода:

function my_rating() {

ob_start();
$args = array('post_type' => 'casino_type', 'orderby' => 'meta_value_num', 'meta_key' => 'wp_review_total', 'posts_per_page' => '10');
query_posts($args);
if ( have_posts() ) :
while ( have_posts() ) : the_post(); 
get_template_part('parts/loop', '1');
endwhile;
endif;
$output = ob_get_contents();
ob_end_clean();
wp_reset_query();
return $output;
                 }
add_shortcode('table2', 'my_rating');

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

• ‘post_type’ => ‘casino_type’   — выбираем записи из базы данных, с типом постов: «casino-type» (чтобы в рейтинг не попали другие статьи)
• ‘orderby’ => ‘meta_value_num’   — сортируем по численному значению мета-поля
• ‘meta_key’ => ‘wp_review_total’   — значение мета-поля брать из поля создаваемого плагином числа рейтинга
• ‘posts_per_page’ => ’10’   — количество позиций в списке на одной «странице» (если вы не прописываете никакую пагинацию после цикла, то это означает просто отображение 10 первых по рейтингу записей)
• get_template_part(‘parts/loop’, ‘1’);   — выводим полученные данные в нашу, заранее подготовленную, таблицу
• add_shortcode(‘table2’, ‘my_rating’);   — Даём название шорткоду table2

Ну вот собственно и всё! Теперь, введя где-либо [table2] вы получите в том месте таблицу из 10 офферов, сортированных по убыванию рейтинга. Не забываем про создание правильных стилей для таблиц десктопной и мобильной версии сайта, это очень щекотливый момент, с которым придется повозиться, так как таблицы всегда выглядят не очень хорошо на смартфонах. Вот, для примера, мобильная версия той же таблицы:

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

Прошу не судить строго за, возможно, корявый код, я не кодер, всё делалось по гуглу, собственными руками и головой))) Статью, как обычно, писал на одном дыхании… Наверняка, есть какие-то более правильные варианты, но, этот код работает и уже давно, без проблем.