Masonry — вывод блоков разных размеров в виде кирпичной кладки для html страниц и WordPress

Сегодня хочу затронуть один очень интересный материал, который будет полезен для тех кто начал заниматься версткой и созданием своих сайтов. Речь пойдет об эффекте Masonry — вывод блоков разных размеров в виде кирпичной кладки. В статье покажу как это сделать для html страниц и сайтов на WordPress. Отличаться мало чем будет, но все же свои моменты есть. Так что, если вы захотите на своем сайте внедрить подобный эффект, эта статья вам поможет в этом.

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

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

Скрипт Masonry
В самом начале стоит понять, что вся сетка создается благодаря скрипту Masonry. Поэтому для работы нужен он, но так как он работает на основе jQuery, нужно подключить библиотеку. Подключать нужно такую строку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

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


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

<script src="masonry.js"></script>

Нужно только указать правильный путь к файлу masonry.js. Если у вас все файлы в корне то так и оставить, а если в папках то весь путь вложенности. Используйте статью с инструкцией подключения.

Так же можно просто указать в подключении ссылку к стороннему ресурсу, например так:

<script src="https://masonry.desandro.com/masonry.pkgd.min.js"></script>

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

Не указывайте ссылки с моего сайта или сайтов других вебсамстеров. Так вы создаете нагрузку на чужой сайт и со временем ваше подключение будет заблокировано.


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

Это будет wp_enqueue_script. Найдите функцию что подключает другие скрипты и рядом с ними добавьте подключение Masonry, которое уже вшито в WordPress и его нужно только подключить.

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


wp_enqueue_script('masonry');

Если не можете найти подключение скриптов, то просто добавляете в самый конец function.php перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец. Добавляйте вот такую функцию:

function masonry_scr(){
wp_enqueue_script('masonry');
}
add_action( 'wp_enqueue_scripts', 'masonry_scr' );

После подключения скрипта Masonry, чтобы он начал работать его нужно применить к нашему контейнеру. Запуск скрипта нужно сделать после библиотеки jQuery и самого скрипта Masonry. Выглядит он так:

<script>
jQuery(document).ready(function($){
var $container = $('#container');$container.masonry({columnWidth:'.item',itemSelector: '.item'});
});
</script>

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

$('#container') - тут мы указываем ID нашего контейнера, внутри которого будут блоки которые нужно выровнять в сетке.
columnWidth:'.item' - параметр, который задает ширину блоков. В нашем случаи мы указали ширину равную стилям блока с классом item, поэтому ширину зададим в CSS стилях.
itemSelector: '.item' - указываем скрипту блоки с каким классом будут использованы при построении сетки.
У Masonry есть еще некоторые параметры, которые используются редко, если вы хотите детально изучить, можете поискать информацию ее очень много по Masonry. Для данного примера хватит и этих двух.

Таким образом вы активируете Masonry на вашем сайте и теперь можно уже перейти к следующим шагам.

HTML разметка
Сначала рассмотрим вариант для HTML страниц и тут все просто, вам нужно просто добавить примерно такую разметку:

<div id="container">
<div class="item">
<a class="item_link" href="/"><img src="images.jpg" >
<h2>Lorem Ipsum - текст рыба</h2>
<p>Что такое Lorem Ipsum? Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой"…</p>
</a>
</div>
<div class="item w2">
<a class="item_link" href="/"><img src="images2.jpg" >
<h2>Lorem Ipsum - текст рыба</h2>
<p>Что такое Lorem Ipsum? Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой"…</p>
</a>
</div>

//дальше любое количество блоков

</div>

Как видите наш код обернут в родительский контейнер с ID - container. Внутри те самые блоки с классом item из которых будет построена сетка. Блоков может быть любое количество. В нашем примере, четным блокам помимо item еще присвоен класс w2. Это не Masonry, это моя доработка, для того чтобы задавать для четных блоков уникальные стили. Если вам это не нужно, то можно не добавлять второй класс.

Теперь рассмотрим вариант для WordPress. Тут немого сложнее, но если вы работаете с этой системой, то должны разбираться в циклах и как они устроены. Именно к циклу мы и применим Masonry. Выглядеть это будет примерно так:

<div id="container">
<?php  if (have_posts()): $one = true; while (have_posts()) : the_post(); ?>
<div class="item <?php if(!$one == true) echo "w2" ?>" >
<a class="item_link" href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?>
<h2><?php the_title(); ?></h2>
<?php echo wp_trim_words( get_the_content(), 20); ?>
</a>
</div>
<?php
$one = !$one; 
endwhile; 
the_posts_pagination($args = array('show_all' => false,'end_size' => 2,'mid_size' => 2,'prev_next' => true,'prev_text' => 'Назад','next_text'  => 'Вперед','add_args' => false,'add_fragment' => '','before_page_number' => '','after_page_number' => '','screen_reader_text' => ' ',));  else : echo '404 страница не найдена!'; endif; ?>
</div>

Как и с версией для HTML, оборачиваем цикл в контейнер с ID - container. Внутри цикла будут генерироваться те же блоки с классом item и с классом w2 четные. WordPress генерирует одинаковые блоки согласно указанным параметрам. Если у вас будут разно размерные миниатюры, разной длины заглавия для записей и разная длина текста, то отличимые стили для четных блоков вам не надо, в противном случаи блоки будут почти одинаковы и сетка не будет выглядеть интересно. Если не хотите четным блокам добавлять другие стили, то код будет таким:

<div id="container">
<?php  if (have_posts()): while (have_posts()) : the_post(); ?>
<div class="item" >
<a class="item_link" href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?>
<h2><?php the_title(); ?></h2>
<?php echo wp_trim_words( get_the_content(), 20); ?>
</a>
</div>
<?php
endwhile; 
the_posts_pagination($args = array('show_all' => false,'end_size' => 2,'mid_size' => 2,'prev_next' => true,'prev_text' => 'Назад','next_text'  => 'Вперед','add_args' => false,'add_fragment' => '','before_page_number' => '','after_page_number' => '','screen_reader_text' => ' ',));  else : echo '404 страница не найдена!'; endif; ?>
</div>

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

content.php
index.php
category.php
archive.php
И другие файлы, в зависимости от вашей темы. Внутрь цикла можете добавлять любые элементы, главное внутрь блока item. Это могут быть миниатюры, кнопки, тексты, заголовки и тд. Все зависит от вашей фантазии. Что касается разметки на этом все, остались лишь стили.

CSS стили
Стили для простых страниц и WordPress одинаковы, так что добавьте следующие стили в свой файл стилей:

#container{max-width:1200px;margin:15px auto 0;position:relative;min-height:100vh;}
.item{width:23%;margin:1%;overflow:hidden;text-align:center;box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.1);border-radius:15px;-webkit-border-radius:15px;}
.item,.item > *{box-sizing:content-box;-webkit-box-sizing:content-box;}
.item img {height:250px;width:100%;-webkit-border-radius:0;border-radius:0;}
.w2 img{height:350px;}
.item h2{font-weight:bold;font-size:20px;line-height:25px;padding:5px;}
.item p{font-size:15px;line-height:19px;padding:5px;}
.item a{height:100%;display:block;position:relative;overflow:hidden;color:#212121;text-decoration:none;}
.item a:hover{position:relative;z-index:2;color:#f00;}

@media (max-width:900px){
.item {width:45%;margin:2%;}
}

@media (max-width:550px){
.item {width:95%;margin:2%;}
}

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

Если все сделаете правильно, то результат не заставит себя ждать.

Добавлено: 13 Марта 2022 13:04:37 Добавил: Андрей Ковальчук

Как отключить прилепленные записи на главной странице WordPress

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

add_action( 'pre_get_posts', 'turn_off_sticky' );
function turn_off_sticky( $query ) {
    if ( $query->is_main_query() ) {
        $query->set( 'ignore_sticky_posts', true );
    }
}

Функция добавляется в файл пользовательских функций - function.php. Если не знакомы с его структурой, то добавляете в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец файла.

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


После добавления можете оценить результат.

Добавлено: 28 Сентября 2021 06:43:39 Добавил: Андрей Ковальчук

Как отключить прилепленные записи на главной странице WordPress

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

add_action( 'pre_get_posts', 'turn_off_sticky' );
function turn_off_sticky( $query ) {
    if ( $query->is_main_query() ) {
        $query->set( 'ignore_sticky_posts', true );
    }
}

Функция добавляется в файл пользовательских функций - function.php. Если не знакомы с его структурой, то добавляете в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец файла.

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


После добавления можете оценить результат.

На этом все, спасибо за внимание.

Добавлено: 10 Сентября 2021 14:20:19 Добавил: Андрей Ковальчук

Как добавить рейтинг записей к комментариям WordPress

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

Добавить надо следующий код нужно в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец.

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

//ДОБАВЛЯЕМ РЕЙТИНГ К КОММЕНТАРИЯМ
add_action( 'comment_form_logged_in_after', 'comm_rating_rating_field' );
add_action( 'comment_form_after_fields', 'comm_rating_rating_field' );
function comm_rating_rating_field () { ?>
<div class="com_block_star">
<label for="rating">Рейтинг<span class="required">*</span></label>
<fieldset class="comments-rating">
<span class="rating-container">
            <?php for ( $i = 5; $i >= 1; $i-- ) : ?>
                <input type="radio" id="rating-<?php echo esc_attr( $i ); ?>" name="rating" value="<?php echo esc_attr( $i ); ?>" /><label for="rating-<?php echo esc_attr( $i ); ?>"><?php echo esc_html( $i ); ?></label>
            <?php endfor; ?>
<input type="radio" id="rating-0" class="star-cb-clear" name="rating" value="0" /><label for="rating-0">0</label>
</span>
</fieldset>
</div>
<?php
}
//СОХРАНЯЕМ РЕЗУЛЬТАТ
add_action( 'comment_post', 'comm_rating_save_comment_rating' );
function comm_rating_save_comment_rating( $comment_id ) {
    if ( ( isset( $_POST['rating'] ) ) && ( '' !== $_POST['rating'] ) )
    $rating = intval( $_POST['rating'] );
    add_comment_meta( $comment_id, 'rating', $rating );
}
 
//ОБЯЗАТЕЛЬНОСТЬ РЕЙТИНГА
add_filter( 'preprocess_comment', 'comm_rating_require_rating' );
function comm_rating_require_rating( $commentdata ) {
    if ( ! isset( $_POST['rating'] ) || 0 === intval( $_POST['rating'] ) )
    wp_die('Ошибка: Вы не добавили оценку. Нажмите кнопку «Назад» в своем веб-браузере и повторно отправьте свой комментарий с оценкой.');
    return $commentdata;
}
 
//ВЫВОДИМ РЕЙТИНГ В ОПУБЛИКОВАННОМ КОММЕНТАРИИ
add_filter( 'comment_text', 'comm_rating_display_rating');
function comm_rating_display_rating( $comment_text ){
if ( $rating = get_comment_meta( get_comment_ID(), 'rating', true ) ) {
$stars = '<div class="com_star">';
for ( $i = 1; $i <= $rating; $i++ ) {$stars .= '<span class="dashicons dashicons-star-filled"></span>';}
$stars .= '</div>';
$comment_text = $comment_text . $stars;
return $comment_text;
} else {return $comment_text;}
}
 
//ПОДКЛЮЧАЕМ СТИЛИ DASHICONS
add_action( 'wp_enqueue_scripts', 'comm_rating_styles' );
function comm_rating_styles() {
wp_enqueue_style( 'dashicons');
}

Код разбит комментариями, за что отвечает каждая его часть.

//Добавляем рейтинг к комментариям - эта часть кода, добавит в вашу форму комментариев рейтинг. Изначально это просто радио кнопки. Чтобы они превратились в звезды, понадобится еще несколько моментов.
//Сохраняем результат - данная функция, сохраняет результат голосования от комментатора.
//Обязательность рейтинга - эта функция делает наш рейтинг обязательным. Если комментатор не выставит оценку, комментарий не будет отправлен. Если это вам не нужно, то не добавляйте эту часть кода, а так же в самой первой части, можете удалить код - <span class="required">*</span> По-умолчанию, в комментариях WordPress, звездочка означает обязательность заполнения. Если у вас не так, можете поменять.
//Выводим рейтинг в опубликованном комментарии - данная функция выводит рейтинг в опубликованном комментарии. То бишь результат.
//Подключаем стили dashicons - данная функция подключает вшитые в WordPress стили шрифта dashicons. Благодаря ему наши радио кнопки и превратятся в звезды. Но чтобы шрифт заработал, нужен еще один шаг.
Чтобы рейтинг красиво отобразился, ему нужно добавить CSS стили. Можете добавить их в свой файл стилей или в отдельный, а потом его подключить, в общим, как вам удобно.
.all_com_pr span:before{color:#FB9C30;}
.com_block_star{margin:10px 0;}
.comments-rating{border: none;padding: 0;margin-left: 0;}
.comments-rating label{display:inline-block;font-size:18px;}
.rating-container{font-size: 0;unicode-bidi: bidi-override;direction: rtl;}
.rating-container * {font-size: 1.4rem;}
.rating-container > input {display: none;}
.rating-container > input + label {
    font-family:'dashicons';
    display: inline-block;
    overflow: hidden;
    text-indent: 9999px;
    width: 1em;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
}
 
.rating-container > input + label:before {
    display: inline-block;
    text-indent: -9999px;
    content: "\f154";
    color: #888;
}
 
.rating-container > input:checked ~ label:before,
.rating-container > input + label:hover ~ label:before,
.rating-container > input + label:hover:before {
    content: "\f155";
    color: #FB9C30;
    text-shadow: 0 0 1px #888;
}
 
.rating-container > .star-cb-clear + label {
    text-indent: -9999px;
    width: .5em;
    margin-left: -.5em;
}
 
.rating-container > .star-cb-clear + label:before {
    width: .5em;
}
 
.rating-container:hover > input + label:before {
    content: "\f154";
    color: #888;
    text-shadow: none;
}
 
.rating-container:hover > input + label:hover ~ label:before,
.rating-container:hover > input + label:hover:before {
    content: "\f155";
    color: #FB9C30;
    text-shadow: 0 0 1px #888;
}

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

Теперь хочу показать как сделать общую оценку взятую из всех комментариев и выведенную перед контентом, то бишь перед текстом статьи. Для этого вам нужно добавить псоле уже добавленных выше функций, еще парочку:
//ПОДСЧЕТ ОБЩЕЙ ОЦЕНКИ.
function comm_rating_get_average_ratings( $id ) {
    $comments = get_approved_comments( $id );
    if ( $comments ) {
        $i = 0;
        $total = 0;
        foreach( $comments as $comment ){
            $rate = get_comment_meta( $comment->comment_ID, 'rating', true );
            if( isset( $rate ) && '' !== $rate ) {
                $i++;
                $total += $rate;
            }
        }
 
        if ( 0 === $i ) {
            return false;
        } else {
            return round( $total / $i, 1 );
        }
    } else {
        return false;
    }
}
 
// ВЫВОД ОЦЕНКИ ПЕРЕД ПОСТОМ
add_filter( 'the_content', 'comm_rating_display_average_rating' );
function comm_rating_display_average_rating( $content ) {
    global $post;
    if ( false === comm_rating_get_average_ratings( $post->ID ) ) {
        return $content;
    }
    $stars   = '';
    $average = comm_rating_get_average_ratings( $post->ID );
 
    for ( $i = 1; $i <= $average + 1; $i++ ) { $width = intval( $i - $average > 0 ? 20 - ( ( $i - $average ) * 20 ) : 20 );
 
        if ( 0 === $width ) {
            continue;
        }
 
        $stars .= '<span style="overflow:hidden; width:' . $width . 'px" class="dashicons dashicons-star-filled"></span>';
 
        if ( $i - $average > 0 ) {
            $stars .= '<span style="overflow:hidden; position:relative; left:-' . $width .'px;" class="dashicons dashicons-star-empty"></span>';
        }
    }
     
    $custom_content  = '<div class="all_com_pr">Оценка: ' . $average .' ' . $stars .'</div>';
    $custom_content .= $content;
    return $custom_content;
}

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

Если вас это не устраивает, вы хотите выводить где-то в своем месте, то можете вместо последней функции, добавить немного измененную, которую нужно вызывать в нужном месте.
function comm_rating_display_average_rating() {
global $post;
$stars   = '';
$average = comm_rating_get_average_ratings( $post->ID );
for ( $i = 1; $i <= $average + 1; $i++ ) { $width = intval( $i - $average > 0 ? 20 - ( ( $i - $average ) * 20 ) : 20 );
if ( 0 === $width ) {continue;}
$stars .= '<span style="overflow:hidden; width:' . $width . 'px" class="dashicons dashicons-star-filled"></span>';
if ( $i - $average > 0 ) {
$stars .= '<span style="overflow:hidden; position:relative; left:-' . $width .'px;" class="dashicons dashicons-star-empty"></span>';
}
}
$custom_content  = '<div class="all_com_pr">Оценка: ' . $average .' ' . $stars .'</div>';
echo $custom_content;
}

Что-бы вызвать данную функцию, то есть запустить ее, в нужном вам месте, внутри цикла добавьте такую строку:
comm_rating_display_average_rating();

Данная строка помещается в среду PHP, если у вас HTML, то нужно заключить строку в теги PHP, выглядеть она будет так:
<?php comm_rating_display_average_rating(); ?>

В том месте где вы разместите эту строку, там и появится рейтинг.

Данная система рейтинга по своему интересна и имеет право на существование. С ее помощью можно добиться более точной оценки материала, а в месте с ней и комментарий человека, что ему понравилось или нет в вашем материале.

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

Добавлено: 18 Июня 2021 04:32:24 Добавил: Андрей Ковальчук

Как отключить редактор Gutenberg для записи или рубрики WordPress

Если по какой то причине вы не хотите использовать плагин Classic Editor, который позволяет создавать и редактировать отдельные записи редактором Gutenberg или классическим, то можно использовать небольшой код, который позволит это сделать. например, если вам всего нужно отключить Gutenberg для одной или двух записей.

Отключаем Gutenberg для одной или нескольких записей
Для отключения редактора Gutenberg только одной для записи, в файл функций вашей текущей темы function.php, нужно добавить небольшой фильтр и внести в него ID нужной вам записи.

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

add_filter( 'use_block_editor_for_post', 'disable_gutenberg_for_post', 10, 2 );
function disable_gutenberg_for_post( $use, $post ){
if( $post->ID == 855) 
return false;
return $use;
}

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

post=2056 - и есть ID нужной вам записи. Добавляете его вместо 855 и у вашей записи будет классический редактор.

Если вы захотите отключить редактор Gutenberg для нескольких записей, то нужно и их номер добавить в код. Выглядеть это будет примерно так:
add_filter( 'use_block_editor_for_post', 'disable_gutenberg_for_post', 10, 2 );
function disable_gutenberg_for_post( $use, $post ){
if( $post->ID == 855 || $post->ID == 624 ) 
return false;
return $use;
}

$post->ID == 855 - указатель номера записи разделяется со следующим, логическим оператором PHP - ||.

Отключаем Gutenberg для одной или нескольких рубрик
С рубриками, дела обстоят аналогично, меняется код функции для фильтра, но смысл тот же. Он аналогично, с фильтром для записей, добавляется в - function.php. Теперь код выглядит так:
add_filter( 'use_block_editor_for_post', 'disable_gutenberg_for_post', 10, 2 );
function disable_gutenberg_for_post( $use){
if( has_category(1))
return false;
return $use;
}

Как и в прошлых примерах, в третей строке указывается ID нужной рубрики. В примере это - 1. Узнается ID рубрики аналогично с ID записи. Переходите в список рубрик, находите нужную, наводите и в появившейся ссылке внизу страницы увидите ID.

Если решите отключить сразу для нескольких рубрик, то нужно добавить массив, в котором указать через запятую ID рубрик. Выглядит это примерно так:
add_filter( 'use_block_editor_for_post', 'disable_gutenberg_for_post', 10, 2 );
function disable_gutenberg_for_post( $use){
if( has_category(array(1,3)))
return false;
return $use;
}

array(1,3) - и есть наш массив с айди рубрик. Поменяйте на свои и в тех что вы укажите будет выводится классический редактор.

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

Добавлено: 17 Июня 2021 04:32:37 Добавил: Андрей Ковальчук

Плавающая корзина с счетчиком товаров в ней для Woocommerce

Чтобы добавить такую кнопку на свой сайт нужно добавить небольшой код в вашу тему, на которой активирован плагин Woocommerce. Добавлять код нужно, например в файл шапки или подвала. Тогда, ваша иконка плавающая будет отображаться на всех страницах сайта. Лично я добавляю в файл подвала - footer.php. Конкретно, перед функцией - wp_footer();, она есть в любой теме WordPress, в файле footer.php.

<?php 
if (class_exists('WooCommerce' )){
global $woocommerce; ?>
<a href="<?php echo $woocommerce->cart->get_cart_url() ?>" class="fix_cart_btn fz_an">
        <span class="basket-btn__label">Корзина</span>
        <span class="fix_cart_count"><?php echo sprintf($woocommerce->cart->cart_contents_count); ?></span>
</a>
<?php 
} 
?>

Добавлять можно с тегами PHP, можно без, в зависимости от того в какую среду вы добавляете код. В данном примере для HTML среды, если в РНР добавляете, то нужно без первой и последней строки.

По самому коду все просто. Во второй строке мы проверяем активирован ли Woocommerce и существует ли класс WooCommerce. Допустим, у вас не активен плагин, тогда кнопки не будет. Далее, подключаем глобальную переменную $woocommerce, чтобы работала ссылка на корзину и счетчик. Теперь уже начинается код самой ссылки-кнопки. Тут все просто, обычная ссылка, путь которой - корзина вашего сайта.

Внутри ссылки добавлено 2 элемента. Первый это иконка, картинка, слово или то что вы захотите туда добавить. Я добавляю иконку от шрифта Font Awesome, если у вас подключена его 5 версия, то тоже можете добавить ее вместо слова Корзина:
<i class="fas fa-shopping-basket"></i>

Придаем стили нашей кнопке. Она будет фиксированной и плавать в правом нижнем углу. Счетчик товаров в корзине будет над кнопкой в правом ее верхнем углу.
.fix_cart_btn{position:fixed;text-align:center;font-size:10px;color:#fff;line-height:50px;bottom:110px;right:40px;background:#01D19D;border-radius:50px;height:50px;width:50px;z-index:100;}
.fix_cart_btn:hover{color:#fff;background:#E666B1;}
.fix_cart_count{position:absolute;top:2px;right:2px;font-size:11px;line-height:15px;min-width:15px;font-weight:bold;background:#E666B1;-webkit-border-radius:10px;border-radius:10px;}


Вы, конечно же, можете все менять на свой вкус и под свои нужды.

Добавлено: 16 Июня 2021 04:33:53 Добавил: Андрей Ковальчук

Сортировка товаров по наличию в Woocommerce WordPress

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

Конечно же, вы можете отключить показ товаров которых нет в наличии в настройках плагина Woocommerce. Сделать это можно перейдя по вкладке в консоли - Woocommerce - Настройки - вкладка Товары - вкладка Запасы.

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

Для этого нужно добавить небольшой код в файл функций. Как я говорил в прошлых статьях, можно добавлять в файл пользовательских функций function.php. Если вы послушались моего совета и создали отдельный файл для Woocommerce, то добавлять нужно в него, чтобы не путать функции темы и Woocommerce, если вы планируете их добавлять много.

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


// СНАЧАЛА ПОКАЗЫВАТЬ ТОВАР В НАЛИЧИИ
class iWC_Orderby_Stock_Status{
public function __construct(){
    if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {
    add_filter('posts_clauses', array($this, 'order_by_stock_status'), 2000);
}
}
public function order_by_stock_status($posts_clauses){
global $wpdb;
if (is_woocommerce() && (is_shop() || is_product_category() || is_product_tag())) {
    $posts_clauses['join'] .= " INNER JOIN $wpdb->postmeta istockstatus ON ($wpdb->posts.ID = istockstatus.post_id) ";
    $posts_clauses['orderby'] = " istockstatus.meta_value ASC, " . $posts_clauses['orderby'];
    $posts_clauses['where'] = " AND istockstatus.meta_key = '_stock_status' AND istockstatus.meta_value <> '' " . $posts_clauses['where'];
}
return $posts_clauses;
}
}
new iWC_Orderby_Stock_Status;

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

Добавлено: 10 Июня 2021 07:34:16 Добавил: Андрей Ковальчук

Правильное склонение названий месяцев в датах WordPress

Например, вы опубликовали статью, а дата в ней выглядит примерно так 30 Октябрь 2018. Согласитесь, ведь тридцатое октябрь, как то не звучит, тридцатое октября было бы лучше. Если вы столкнулись с этим и хотите исправить, при этом не менять название месяца на номер или выводить только первые три буквы месяца, то можно добавить одну функцию с несколькими фильтрами.

Для этого вам понадобится добавить немного кода в файл пользовательских функций function.php. Если вы не знакомы с этим файлом и не знаете где добавлять код, то добавляете в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец. Добавить нужно вот такую функцию:

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

function correct_date($cordate = ''){
if ( substr_count($cordate , '---') > 0 ){return str_replace('---', '', $cordate);}
$new_d = array(
'Январь' => 'Января',
'Февраль' => 'Февраля',
'Март' => 'Марта',
'Апрель' => 'Апреля',
'Май' => 'Мая',
'Июнь' => 'Июня',
'Июль' => 'Июля',
'Август' => 'Августа',
'Сентябрь' => 'Сентября',
'Октябрь' => 'Октября',
'Ноябрь' => 'Ноября',
'Декабрь' => 'Декабря'
);
return strtr($cordate, $new_d);
}
add_filter('the_date', 'correct_date');
add_filter('get_the_date', 'correct_date');
add_filter('the_time', 'correct_date');
add_filter('get_the_time', 'correct_date');
add_filter('get_post_time', 'correct_date');
add_filter('get_comment_date', 'correct_date');
add_filter('the_modified_time', 'correct_date');
add_filter('get_the_modified_date', 'correct_date');

У нас есть функция correct_date. Как видите с четвертой строки ее кода начинается замена старых названий на новые. По желанию можете задать свои, например с малой буквы. Данный массив с заменой подойдет для русской версии движка WordPress. Если вы используете английскую, у вас все переведено и нужно исправить дату - то массив будет такой:
$new_d = array(
        "Jan" => "Января",
        "Feb" => "Февраля",
        "Mar" => "Марта",
        "Apr" => "Апреля"
        "May" => "Мая",
        "Jun" => "Июня",
        "Jul" => "Июля",
        "Aug" => "Августа",
        "Sep" => "Сентября",
        "Oct" => "Октября",
        "Nov" => "Ноября",
        "Dec" => "Декабря"
    );

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

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

add_filter('the_date', 'correct_date'); - данный фильтр прикрепляет функцию к выводу на экран или даты публикации поста или группы постов.
add_filter('get_the_date', 'correct_date'); - аналогичный с первым только для функции get_the_date().
add_filter('the_time', 'correct_date'); - данный фильтр прикрепляет функцию склонения к выводу на экран времени (даты) публикации текущей записи в цикле WordPress. the_time - идентична the_date().
add_filter('get_the_time', 'correct_date'); - аналогично с предыдущими.
add_filter('get_post_time', 'correct_date'); - этот фильтр для функции get_post_time, которая получает результат для обработки, а не выводит его на экран.
add_filter('get_comment_date', 'correct_date'); - фильтр для функции get_comment_date, что получает дату указанного комментария.
add_filter('the_modified_time', 'correct_date'); - фильтр для функции the_modified_time, что выводит дату изменения записи.
add_filter('get_the_modified_date', 'correct_date'); - аналогично с предыдущим.
Все эти фильтры затрагивают все функции, что выводят, или получают даты на WordPress. Вы можете не все использовать. Если вам нужно изменить вывод только даты публикации поста и эта дата вызывается только функцией the_date, то вам нужен только первый фильтр и все. Ну и аналогично для остальных.

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

Добавлено: 08 Июня 2021 06:35:41 Добавил: Андрей Ковальчук

Как изменить или отключить чекбокс — Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев

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

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

Для начала рассмотрим вариант с полным отключением чекбокса. Для этого вам нужно добавить в файл функций вашей темы - functions.php, небольшую функцию. Если вы не ориентируетесь в функциях этого файла, то добавляете в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец.

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


/* ОТКЛЮЧАЕМ ЧЕКБОКС */
function comment_hide_checkcdpr( $fields ) {
    unset( $fields['cookies'] );
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_hide_checkcdpr' );

Тут все просто, особо разбирать нечего, каких-то настроек нет. Далее разберем вариант, когда чекбокс надо оставить, но подпись к нему изменить. Как и с первым кодом, добавляйте данную функцию туда же.
/* МЕНЯЕТ ТЕКСТ ЧЕКБОКСА */
function comment_change_checkcdpr( $fields ) {
    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" />' .
    '<label for="wp-comment-cookies-consent">Сохранить имя и email.</label></p>';
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_change_checkcdpr' );

В 2 и 3 строке сам чекбокс и label к нему. Как раз содержимое label, вам и нужно менять. В данном примере стандартная надпись заменена на Сохранить имя и email. Кстати, данный код можно добавить на сайт, если у вас нет чекбокса и вы хотите его иметь.

Еще как бонус, хочу предложить вариант данного кода с дополнительной функцией, проверки сохранял ли данный пользователь ранее данные. Если сохранял - чекбокс будет отмечен. По сути это тот же код, только с маленькими правками.
/* МЕНЯЕТ ТЕКСТ ЧЕКБОКСА И ДЕЛАЕМ ЧЕКБОКС АКТИВНЫМ, ЕСЛИ РАНЕЕ СОХРАНЯЛИСЬ ДАННЫЕ */
function comment_change_checkcdpr( $fields ){
    $user_ca = wp_get_current_commenter();
    $checked = empty( $user_ca['comment_author_email'] ) ? '' : ' checked="checked"';
    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $checked . ' />' .
    '<label for="wp-comment-cookies-consent">Сохранить имя и email.</label></p>';
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_change_checkcdpr' );

Давайте рассмотрим, какие изменения добавлены в этой версии функции.

Во второй строке создаем переменную $user_ca и задаем ей значение - wp_get_current_commenter() .wp_get_current_commenter() - это функция, которая получает имя, почту, URL сайта текущего комментатора из куков.
В третей строке создаем еще одну переменную - $checked и ее значение, это проверка сохраненные ли у данного комментатора в браузере имя и почта к вашему сайту. Если это так, то чекбоксу прописывается параметр checked="checked". То бишь, комментатору который уже давал согласие, не нужно вновь отмечать чекбокс.
Последнее, это выводим нашу переменную $checked в 4 строке в параметрах самого чекбокса.
Вот и весь материал. Он простенький и справляется с задачей. Теперь вы сможете загружать менять или отключать данный чекбокс с проверкой на сохранение персональных данных. Надеюсь, данный материал помог вам.

Добавлено: 28 Мая 2021 07:20:10 Добавил: Андрей Ковальчук

Как вывести все записи и разбить их по рубриками WordPress

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

Чтобы сделать подобное, мы будем использовать функцию WordPress - get_categories(). Можете найти о ней информацию, чтобы дополнительно настроить параметры вывода будущего списка. Я же покажу как вывести абсолютно все статьи всех рубрик.

Для начала как раз и настроим параметры get_categories. Создадим переменную $arg_cat и присвоим ей массив с параметрами.

<?php 
$arg_cat = array(
    'orderby'      => 'name',
    'order'        => 'ASC',
    'hide_empty'   => 1,
    'exclude'      => '',
    'include'      => '',
);

В данном масcиве базовые настройки для get_categories. Обратите внимание, что в первой строке у нас тег РНР. Он нужен если вы помещаете код в среду HTML. Если у вас уже среда РНР то этот тег не нужен. Это элементарно, но многие в пешке не замечают, а потом оставляют гневные комментарии о неработоспособности кода. Вы же не один из таких плохих вебмастеров?

orderby - сортируем категории по имени.
order - направление сортировки, указанной в параметре orderby. То бишь от А до Я или от Я до А.
hide_empty - скрывать ли пустые категории. 0 - нет. 1 - да. Рекомендую скрывать, чтобы не выводить просто названия, под которыми не будет списка.
exclude - список ID тех категорий которые нужно исключить из списка. В данном примере - таковых нет.
include - список ID тех категорий из которых только и выводить записи. В данном примере - таковых нет. Можно вывести только с пары рубрик, или с одной, например если в ней много подрубрик.
Теперь присваиваем параметры для get_categories и помещаем ее в переменную - $categories

$categories = get_categories( $arg_cat );

Далее мы проверим не пуста ли переменная $categories, то бишь, если get_categories, согласно заданным в начале параметрам нашла подходящие категории, то мы продолжаем работу. После чего, с помощью foreach, перебираем массив наших категорий что получила get_categories.

Можете прочитать по какому принципу работает foreach, подробно останавливаться на этом не буду. Эта статья материал не для новичков, поэтому если вы не знакомы з foreach. рекомендую ознакомится. Код перебора массива з рубриками, что мы получим, выглядит будет так:

if( $categories ){
    foreach( $categories as $cat ){
     
// ТУТ БУДЕТ БУДУЩИЙ КОД ЦИКЛА ДЛЯ ВЫВОДА СПИСКА
 
}   
} 
?>

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

Перебор массива пошел, теперь нужно выводить данные наших рубрик. То бишь - название рубрики и все записи, что в нее входят. В этом нам поможет - WP_Query.

С помощью WP_Query мы выведем цикл. Весь код что мы получим нужно будет поместить внутрь foreach. Для WP_Query можно и нужно задать параметры. С помощью них можно настроить какие записи вы хотите получить, их количество, сортировка и тд. Ознакомьтесь с WP_Query и узнайте все.

В нашем случаи мы будем использовать лишь 2 параметра. один из которых обязателен. Массив с параметрами поместим в переменную - $arg_posts.

$arg_posts =  array(
    'cat' => $cat->cat_ID,
    'posts_per_page' => -1,
);

cat - тот самый обязательный параметр. В нем мы указываем что нужно выводить записи только той категории, которую выбрал перебор foreach из массива категорий. $cat->cat_ID - параметр, который менять нельзя.
posts_per_page - указав значение -1, мы разрешили выводить все записи рубрики. Если хотите выводить только последние 5, то укажите число 5.
Теперь присваиваем параметры для WP_Query и помещаем ее в переменную - $query.

$query = new WP_Query($arg_posts);

Далее уже строим цикл где и выведем все нужные данные.

if ($query->have_posts() ) : ?>
<a href="<?php echo get_category_link( $cat->term_id ); ?>"><h2><?php echo $cat->name; ?></h2></a>
 
<ul>
    <?php while ( $query->have_posts() ) : $query->the_post();  ?>
    <li>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><h3><?php the_title(); ?></h3></a>
    </li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>         
<?php endif; 

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

Теперь соберем все в кучу, чтобы получить готовый результат.

<?php 
//НАЧАЛО СПИСКА
 
$arg_cat = array(
    'orderby'      => 'name',
    'order'        => 'ASC',
    'hide_empty'   => 1,
    'exclude'      => '',
    'include'      => '',
);
$categories = get_categories( $arg_cat );
 
if( $categories ){
    foreach( $categories as $cat ){
        $arg_posts =  array(
                'posts_per_page' => -1,
                'cat' => $cat->cat_ID,
            );
    $query = new WP_Query($arg_posts);
 
if ($query->have_posts() ) : ?>
<a href="<?php echo get_category_link( $cat->term_id ); ?>"><h2><?php echo $cat->name; ?></h2></a>
 
<ul>
    <?php while ( $query->have_posts() ) : $query->the_post();  ?>
    <li>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><h3><?php the_title(); ?></h3></a>
    </li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>         
<?php endif; 
 }  } 
 
// КОНЕЦ 
?>

Данный код можно поместить в любое место темы, где хотите вывести данный список. Учтите только среда РНР или HTML.

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

Сохраните настройки и смотрите страницу. Функция выведет все рубрики и записи к ним что есть на сайте.

Добавлено: 18 Мая 2021 06:35:31 Добавил: Андрей Ковальчук

Система лайков или кнопка мне нравится c использованием cookies на WordPress

Если совпадение находилось, то голос не засчитывался, так работает фильтр, чтобы не было накруток. Мне это не понравилось, потому как идея засорения базы данных мусором - такое себе. Поэтому я решил переделать прошлый материал под использование cookies. С их помощью и будет хранится информация - голосовал ли посетитель ранее.

Чтобы это сделать, нужно выполнить первые два пункта прошлой статьи. Сначала инициализировать скрипт - post-like.js. Далее добавляете две строки add_action, где мы нашу функцию по подсчету голосов вешаем на указанный хук. там все расписано и просто.

Третий шаг в прошлой статье - это подключение нашей функции подсчета и записи голосов post_like(). Ее уже с той статьи подключать не надо. Для способа с cookies у нас будет упрощенная ее версия. Но прочитать ее полностью. чтобы понять устройство и принцип стоит, потому как дальше у нас измененные скрипты но смысл их тот же что и там и там более подробно расписано.

Если добавили подключение post-like.js с дополнительные данными для аякса и повесили будущую функцию на хук. То после добавляете новую функцию, переделанную - post_like().

function post_like(){
$nonce = $_POST['nonce'];
if(!wp_verify_nonce( $nonce, 'ajax-nonce')) die ( 'Ошибка!');
if(isset($_POST['post_like'])){
$post_id = $_POST['post_id'];
$meta_count = get_post_meta($post_id, "votes_count", true);
update_post_meta($post_id, "votes_count", ++$meta_count);
echo $meta_count; 
}
exit;
}

Как видите, она схожа с прошлой, но с нее вырезано все что касается проверки и записи полей для IP адреса. Расписывать нет смысла такие же строки расписаны в прошлой статье. Функция просто при запуске получает ID статьи где нажали на кнопку, и в ее произвольное поле, которое называется - votes_count, записывает значение на 1 больше.

После функции подсчета, нам нужна новая функция вызова самой кнопки уже на сайте. Той кнопки по нажатию на которую и будет подсчет. подключаете ее после прошлой в том же function.php.
function getPostLikeLink($post_id){
$vote_count = get_post_meta($post_id, "votes_count", true);
//НЕАКТИВНАЯ КНОПКА
$output = '<div class="nopost-like"><span>Нравится</span><span class="count">'.$vote_count.'</span></div>';
//АКТИВНАЯ КНОПКА
$output .= '<div class="post-like"><span class="like_ico" data-post_id="'.$post_id.'">Нравится</span><span class="count">'.$vote_count.'</span></div>';
return $output;
}

getPostLikeLink - теперь тоже новая. Так как нет проверки по айпи, она выглядит иначе. По сути она выводит сразу 2 кнопки. Активную и нет, ту на которую нажать нельзя.

Неактивная имеет класс у родительского контейнера nopost-like, а активная - post-like. Это нужно учесть, эти классы понадобятся далее.
// В СРЕДУ PHP
echo getPostLikeLink(get_the_ID());
//  В СРЕДУ HTML
<?php echo getPostLikeLink(get_the_ID()); ?>

Теперь вернемся к post-like.js. В прошлой статье в нем был один код, теперь немного измененный уже с учетом cookies. Создаете или открываете, если создали и заменяете содержимое или добавляете новое если он пуст:
jQuery(document).ready(function($){
$(".like_ico").click(function(){
var pathToMyPage = window.location.pathname;
$.cookie("post-like-count", "1", { expires:1, path: pathToMyPage }); 
heart = $(this);
post_id = heart.data("post_id");
$.ajax({
type: "post",
url: ajax_var.url,
data: "action=post-like&nonce="+ajax_var.nonce+"&post_like=&post_id="+post_id,
success: function(count){
if(count != "already"){
heart.addClass("voted");
$(".count").text(count);
$('.post-like').hide();
$('.nopost-like').show();
}
}
});
return false;
});
 
if ( $.cookie("post-like-count") == null){
    $('.post-like').show();
    $('.nopost-like').hide();
}else{
    $('.post-like').hide();
    $('.nopost-like').show();
}
 
 
});

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

Во второй строке мы запускаем событие после нажатия на кнопку с классом like_ico. В нашей кнопке это слово - Нравится.
В третей строке создаем переменную, с ссылкой на текущую страницу - pathToMyPage . Это для куков, чтобы они записались только для статьи где нажата кнопка, а не для всех кнопок на сайте.
В четвертой строке - создаем имя для куков - post-like-count и значение - 1.

Если кнопка нажата - кукам задается значение 1 и кнопка в будущем станет неактивна. Так же expires, задается 1, это один день. То бишь куки хранятся сутки после они сотрутся и кнопку можно нажать повторно. Если нужно больше дней, укажите свое значение. Ну и в конце переменная с прошлой строки указывает для какой страницы хранить куки.

Далее идет уже аякс отправка нажатия, подсчет голосов, запись в бд и тд, подробнее в прошлой статье. После успешной отправки запроса выполняем определенные действия.
В 14 строке обновляем значения счетчиков у всех блоков с классом count. Так что в функции вывода кнопки учтите это и не меняйте класс или меняйте везде.
В 15 $('.post-like').hide(); - скрываем активную кнопку, которая позволяет увеличивать значение счетчика на 1.
И в 16 строке $('.nopost-like').show(); - показываем неактивную кнопку, нажать которую нельзя. В принципе все с событием по нажатию.
Далее с 23 строки мы проверяем после загрузки страницы, как только человек обновит страницу или впервые зайдет - есть ли у него куки к данной странице. Если нет - не показывать активную и показывать неактивную и в противном случаи - наоборот.
На этом со скриптом все. Но есть еще один важный момент. Куки не будут записываться без специального скрипта куков. Он может быть подключен к вашему сайту ранее, например если вы используете чужую тему, которая уже использует его или какой-то плагин например. На этом этапе вы можете проверить работу кнопки, если нажатия можно совершать множественное количество и кнопка не становится - неактивной, то значит вам не повезло :). Нужно выполнить последний шаг.

Вам нужно скопировать следующую строку скрипта. Она длинная, обязательно скопировать все!
jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options.expires=-1}var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000))}else{date=options.expires}expires='; expires='+date.toUTCString()}var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('')}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break}}}return cookieValue}};

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

После подключения скрипта записи куков - кнопка должна срабатывать только один раз для одной записи.

Что касается стилей, то тут по желанию.

Добавлено: 05 Мая 2021 06:49:34 Добавил: Андрей Ковальчук

Как добавить время чтения к записи WordPress

Недавно мне тоже была поставлена задача сделать вывод такой информации на одной из тем. Раньше не сталкивался с подобной задачей, но видел подобное не раз.

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

Изучив код, я разорался в нем и немного переделал. Там использовалась функция для подсчета слов в тексте, которая не работает с кириллицей, только латиница, поэтому у меня оно и не считало как нужно. Автор того кода использовал метод подсчета через - str_word_count().

Немного изменив код и адаптировав его под кириллицу, у меня получилась такая, готовая функция.

function estimated_reading_time(){
$post = get_post();
$postcnt = strip_tags( $post->post_content );
$words = count(preg_split('/\s+/', $postcnt));
$minutes = floor( $words / 120 );
$seconds = floor( $words % 120 / ( 120 / 60 ) );
if (1 <= $minutes){$estimated_time = $minutes . ' мин на чтение' . ($minutes == 1 ? '' : 's');}
else{$estimated_time = $seconds . ' сек на чтение' . ($seconds == 1 ? '' : 's');}
echo $estimated_time;
}

Давайте разберем ее, чтобы понять как она устроена.

1. $post = get_post(); - Создаем переменную $post, которая будет содержать в себе текст записи.
2. $postcnt = strip_tags( $post->post_content ); - Новая переменная в которой из текста записи убираем все теги, оставляя голый текст.
3. $words = count(preg_split('/\s+/', $postcnt)); - Третья переменная, в которой и ведется подсчет слов используя вторю переменную.
4. $minutes = floor( $words / 120 ); - Переменная в которой мы вычисляем минуты, что понадобятся для чтения текста записи. Тут используется простая 5. формула. Берем весь текст и разделяем на среднюю скорость чтения - 120 слов в минуту. Если хотите сменить скорость, укажите свое число.
6. $seconds = floor( $words % 120 / ( 120 / 60 ) ); - Переменная, для вычисления секунд. если текст короткий. Ну и если хотите можно указывать время чтения статьи вместе с секундами, например - 2мин 32сек, если вам нужна прям такая точность.
7. Дальше, мы просто создаем условие, если время чтения больше минуты то выводим текст в минутах, в противном случаи в секундах
8. Ну и в конце выводим результат.

Как упомянул выше, если хотите то время можно выводить с секундами, просто замените седьмую строку, где начинается условие, на немного другой код.
if (1 <= $minutes){$estimated_time = $minutes . ' мин' . ($minutes == 1 ? '' : 's') . ', ' . $seconds . ' сек' . ($seconds == 1 ? '' : 's');}

Данная функция добавляется в файл function.php или другой файл вашей темы, где вы добавляете пользовательские функции. Добавляете в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец.

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


Чтобы вывести время в шаблоне вашей темы, в том место где хотите видеть надпись с временем, просто добавьте вызов функции. Это может быть single.php,category.php,content.php и тд. Все зависит от вашей темы, сказать точно я не могу.
bm_estimated_reading_time();

Если добавляете в среду HTML, то не забудьте теги PHP и код будет таким:
<?php bm_estimated_reading_time();?>

Добавлено: 29 Апреля 2021 06:36:44 Добавил: Андрей Ковальчук

Как переименовать вкладки, табы на странице товара в магазине Woocommerce WordPress

Речь пойдет о трех стандартных вкладках, что размещены на странице товара Woocommerce. Это вкладки - Описание, Детали и Отзывы. Такое может понадобится, например, если у вас появится вопрос - как переименовать вкладку детали на Характернистики.

Естественно, текст на вкладках можт быть любым. Давайте же разберем как это сделать.

Переименование делается благодаря использованию фильтра woocommerce_product_tabs для woocommerce. Данный фильтр, как и все функции нужно добавлять в файл пользовательских функций. Как я говорил в прошлых статьях, можно добавлять в файл пользовательских функций function.php. Если вы послушались моего совета и создали отдельный файл для Woocommerce, то добавлять нужно в него, чтобы не путать функции темы и Woocommerce, если вы планируете их добавлять много.

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

add_filter( 'woocommerce_product_tabs', 'wootabs_rename', 98 );
function wootabs_rename( $tabs ) {
$tabs['additional_information']['title'] = __( 'Вместо Деталей' );
$tabs['description']['title'] = __( 'Вместо Описания' );
$tabs['reviews']['title'] = __( 'Вместо Отзывов' ); 
return $tabs;
}

По коду все просто. Первая строка мы запускаем наш фильтр с функцией wootabs_rename, которую ниже создаем во второй строке.

1. $tabs['description'] - вкладка описание.
2. $tabs['additional_information'] - вкладка Детали
3. $tabs['reviews'] - вкладка Отзывы

В этих трех строках мы и меняем название, а конкретнее пишите свои названия в место моих - Вместо Описания, Вместо Деталей, Вместо Отзывов. Можно удалить ненужные,если переименовать нужно только одну вкладку, а остальные оставить без изменений или использовать все строки, тут все зависит от ваших нужд.

В предпоследней строке возвращаем новые название с помощью return.

Так же, если по каким то причинам данный фильтр не сработал, можно сделать фильтр для каждой вкладки отдельно. Тогда код будет следующим:
add_filter( 'woocommerce_product_description_tab_title', function(){
    return 'Вместо Описания';
} );
add_filter( 'woocommerce_product_additional_information_tab_title', function(){
    return 'Вместо Детали';
} );
add_filter( 'woocommerce_product_reviews_tab_title', function(){
    return 'Вместо Отзывов';
} );

Тут тоже все просто. Три разных фильтров для трех вкладок. Просто добавьте любой из трех, два или все сразу и напишите свое название вкладки.

Как видите, нет ничего сложного. Надеюсь, эта статья будет вам полезна и поможет вам в вашем вопросе.

Добавлено: 28 Апреля 2021 06:45:22 Добавил: Андрей Ковальчук

Свои кнопки редактора TinyMCE не отображаются в блоках редактора Gutenberg

В этой статье мы разберемся как это исправить, к тому же это делается очень легко. Предупреждаю сразу, это статья рассчитана для тех кто в работе с кодом на "ТЫ", кто WordPress знает очень хорошо и ее функции вы увидели не вчера. Если это не так, то эта статья не для вас. Тут нет пошаговой инструкции как внедрить свои кнопки в редактор, тут подсказка как решить проблему для людей, которые понимают в этом. Я пишу это, чтобы потом не было в комментариях и на почти гневных петиций, что добавил код неизвестно куда, просто скопировал а оно не работает. Код с статьи копировать не нужно, его нужно взять и переделать под свой сайт.

И так, если вы ранее добавляли в тему свои кнопки в редактор TinyMCE, а они не отображаются, хотя ранее все было ок, но теперь в Gutenberg при добавлении классического параграфа, кнопок нет в нем то вам нужно найти в коде тех функций что вы добавляли ранее примерно, повторяю "ПРИМЕРНО" такой код, он у вас будет 100% другим но похожим.

// В ЭТОМ ФУНКЦИИ УКАЗЫВАЕМ ССЫЛКУ НА JAVASCRIPT-ФАЙЛ КНОПКИ
function my_add_tinymce_script( $plugin_array ) {
    $plugin_array['my_mce_button'] = get_stylesheet_directory_uri() .'/js/short_button.js';
    return $plugin_array;
}
  
// РЕГИСТРИРУЕМ КНОПКУ В РЕДАКТОРЕ
function my_register_mce_button( $buttons ) {
    array_push( $buttons, 'my_mce_button' );
    return $buttons;
}
 
 
function my_add_mce_button() {
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'my_add_tinymce_script' );
        add_filter( 'mce_buttons', 'my_register_mce_button' );
    }
}
 
// В ЭТОМ СОБЫТИИ ЗАПУСКАЕМ НАШИ ФУНКЦИИ
add_action('admin_head', 'my_add_mce_button');

В коде у вас будет 2 функции основные. В одной у вас подключается файл, в котором скрипт с настройками кнопки для TinyMCE. У вас там будет свой путь к файлу и свое название и файла и функции, главное это суть. Вторая функция, что регистрирует саму кнопку для редактора TinyMCE. Далее, идет третья функция в которой идет проверка на пользователя и прикрепление предыдущих двух функций к хукам. Кстати, проверка на пользователя может отсутствовать и только присутствовать хуки. И самое главное это то, что данная третья функция вызывается событием:
add_action('admin_head', 'my_add_mce_button');

Данное событие, как вам известно запускает функцию только на стороне администратора, то бишь в админке. Событие загружается при загрузке страницы и в классическом редакторе как было раньше - это работает, да и сейчас, если редактор загружается сразу - это работает, например у вас TinyMCE редактор используется где-то на страницах настроек. Почему же это не работает в Gutenberg? Дело в том, что в нем - TinyMCE редактор в классическом параграфе, грузится немного позже, поэтому событие не срабатывает для него, а только для того TinyMCE, что встроен в WordPress.

Решение задачи очень простое, вместо вызова события в админке при загрузки страницы, которое срабатывает для WordPress, нужно вызывать его при инициализации уже плагина Gutenberg, то бишь немного позже, когда WordPress полностью загружен, но до того, как любые header заголовки были отправлены. В этом помогает событие - init.

Просто скопируйте строчку с событием admin_head и дублируйте ее только сам admin_head замените на init. В моем случаи это выглядит так:
add_action( 'init', 'my_add_mce_button');

У вас будет похоже, но вешаться на событие будет своя функция. По сути у вас все останется как и раньше, просто будет теперь два вызова события add_action.
//ПРИМЕР
add_action('admin_head', 'my_add_mce_button');
add_action( 'init', 'my_add_mce_button');

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

Добавлено: 26 Апреля 2021 07:30:36 Добавил: Андрей Ковальчук

Как удалить кнопку добавить в корзину в категории товаров Woocommerce

В стандартном Woocommerce - кнопка В корзину по-умолчанию присутствует под каждым товаром в общем списке товаров.

Если вам мешает эта кнопка - В корзину, то удалить ее очень просто. Если же вам это не нужно и это разовое добавление кода, то можете добавить прям в файл - function.php.

Добавляете в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец файла.

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


Добавить нужно всего одну строку - удаление события, что вызывает кнопку в цикле товаров.
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

Есть еще одно удаление события, но оно удаляет кнопку внутри карточки товара. Это с одной стороны не имеет смысла, но иногда нужно, если вы, например, выводите какую-то развернутую информацию о конкретном товаре на главной и вам там не нужна кнопка добавления в корзину, вы хотите чтобы посетитель перешел на саму карточку товара и уже там можно добавить в корзину.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Добавлено: 25 Апреля 2021 07:00:21 Добавил: Андрей Ковальчук