Как добавить рейтинг записей к комментариям 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 Добавил: Андрей Ковальчук

Выборка за месяц, неделю

Да очень просто:

Выборка за текущий месяц:

select id from tab where date_format(real_time, '%Y%m') = date_format(now(), '%Y%m');

или вот так:
select id from tab where month(real_time) = month(now()) and year(real_time) = year(now());


За прошлый месяц:
select id from tab where date_format(real_time, '%Y%m') = date_format(date_add(now(), interval -1 month), '%Y%m');


За текущую неделю:
select id from tab where year(real_time) = year(now()) and week(real_time, 1) = week(now(), 1);


В функции week(date, N) N - это номер дня, с которого начинается неделя: 0 - с воскресенья, 1 - с понедельника

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

select id 
from tab 
where real_time > LAST_DAY(DATE_SUB(CURDATE(), INTERVAL 1 MONTH))
  AND real_time < DATE_ADD(LAST_DAY(CURDATE()), INTERVAL 1 DAY)


за предыдущий
select id 
from tab 
where real_time > LAST_DAY(DATE_SUB(CURDATE(), INTERVAL 2 MONTH))
  AND real_time < DATE_ADD(LAST_DAY(CURDATE() - INTERVAL 1 MONTH), INTERVAL 1 DAY)


за текущую неделю
select id 
from tab 
where real_time > DATE_SUB(CURDATE(), INTERVAL (DAYOFWEEK(CURDATE()) -1) DAY)
  AND real_time < DATE_ADD(CURDATE(), INTERVAL (9 - DAYOFWEEK(CURDATE())) DAY)

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

Правильное склонение названий месяцев в датах 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 Добавил: Андрей Ковальчук

Как показать скрыть часть пунктов из списка

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

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

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

<ul class="list">
<li>Пункт номер раз</li>
<li>Пункт номер два</li>
<li>Пункт номер три</li>
<li>Пункт номер четыре</li>
<li>Пункт номер пять</li>
<li>Пункт номер шесть</li>
<li>Пункт номер семь</li>
<li>Пункт номер восемь</li>
<li>Пункт номер девять</li>
<li>Пункт номер десять</li>
</ul>
<div class="show_hide_list">Смотреть все</div>

Тут все просто. Задаем список и присваиваем ему класс list. Можете указать свой, только в скрипте тоже надо будет указать свой новый класс. Так же, обязательно. нужно добавить кнопку, в нашем случаи это просто блок, с классом show_hide_list.

Второй шаг, добавляем стили для нашего списка и кнопки:
ul.list li:nth-child(n+6){display:none;}
.show_hide_list{cursor:pointer;display:inline-block;text-align:center;padding:10px;background:#fc0;}

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

Теперь мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Следующий шаг, подключение уже самого скрипта, который будет осуществлять показ, скрытие пунктов из списка. Его нужно подключить после библиотеки, которую мы подключали выше. Можете воспользоваться той же инструкцией с подсказками как это сделать правильно.
jQuery(document).ready(function($){
if($('ul.list').find('li').length > 5){
$('.show_hide_list').click(function(){
$('ul.list li:nth-child(n+6)').slideToggle('');
$(this).toggleClass('opnd_g');
if($(this).hasClass('opnd_g')){
$(this).html('Скрыть');}
else {$(this).html('Смотреть все');}
});
}else{$('.show_hide_list').hide();}
});

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

if($('ul.list').find('li').length > 5){ - Задаем условие. Если у нашего списка, что имеет класс - .list имеются пункты li и их количество больше пяти.
$('.show_hide_list').click(function(){ - Запускаем функцию, которая сработает, если мы нажмем на элемент страницы с классом show_hide_list, то бишь на нашу кнопку, что расположена после списка.
$('ul.list li:nth-child(n+6)').slideToggle(''); - После нажатия показываем пункты с шестого и до последнего. Если вы поменяли количество в стилях, то меняйте и здесь соответственно.
$(this).toggleClass('opnd_g'); - Добавляем нашей кнопке после нажатия класс opnd_g.
if($(this).hasClass('opnd_g')){ - Создаем условие, что если наша кнопка имеет класс opnd_g, то...
$(this).html('Скрыть');} - То меняем текст в кнопке - Смотреть все на Скрыть.
else {$(this).html('Смотреть все');} - Или, если после нажатия на кнопку класса opnd_g нет, то меняем текст на кнопке снова на Смотреть все.
}); - Просто заканчиваем наше условие по нажатию на кнопку.
}else{$('.show_hide_list').hide();} - а это противоположное действие изначальному условию со второй строки, которое задавало действие если пунктов больше 5. То бишь, если пунктов меньше пяти, кнопка Смотреть все - будет скрыта полностью, чтобы не вводить в заблуждение посетителей сайта.

UPD: 11.12.2019

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

Кнопка должна быть сразу под списком! Иначе способ не сработает.

// ЗАМЕНИТЬ ЭТО
$('ul.list li:nth-child(n+6)').slideToggle('');
// НА ЭТО
$(this).prev().children('li:nth-child(n+6)').slideToggle('');

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

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

Скрипт что определяет мобильное устройство

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

Именно для этого существует скрипт, который и помогает решить подобные задачи. Носит название он - Current Device. Суть данного скрипта в том, что он добавляет на страницу классы, в зависимости от того, на каком устройстве просматривается сайт.

В примере можете протестировать страницу файрбагом. Выбрать разные устройства. Чтобы добавлялся соответственный класс, нужно перезагружать страницу. Как видно на странице примера список классов, что могут быть добавлены. Соответствующий класс присваивается тегу <html>. Скачать архив с скриптом.

На странице примера указаны следующие параметры и классы к ним, давайте их разберем.

Тип устройства - классы данной категории присваиваются в зависимости от устройства на котором открыт сайт:
.mobile - класс что присваивается, если страница открыта на мобильном устройстве.
.tablet - класс что присваивается, если страница открыта на планшете.
.desktop - класс что присваивается, если страница открыта на персональном компьютере.
Положение устройства - классы этой категории присваиваются в зависимости от положения, ориентации устройства. То есть, экран устройства в горизонтальном или вертикальном положении.

.portrait - класс что присваивается, если устройство имеет вертикальную ориентацию.
.landscape - класс что присваивается, если устройство имеет горизонтальную ориентацию.
Операционная система - классы данной категории присваиваются в зависимости от того какая операционная система установлена на устройстве. Данные классы пригодятся если важно отображать разные элементы для устройств с разной ОС.
.ios, .iphone, .ipad, .ipod, .android, .blackberry, .macos, .windows, .fxos, .meego, .television - классы с названием операционных систем, что и будут присвоены.
В моей практике, данный скрипт выручал меня несколько раз ,в основном благодаря классам .mobile и .desktop. Скорее всего и вам именно они и понадобятся. Как и говорил в начале статьи, данные классы не для CSS, хотя и там можно их использовать. Эти классы скорее для скриптов, когда нужно заставить работать скрипт, только при наличии класса на странице. Примерная функция выглядит так:

$('.mobile .block').click(function(){
//СЮДА КОД ФУНКЦИИ ДЛЯ МОБИЛЬНОГО УСТРОЙСТВА
});

В данном случаи функция сработает если вы нажали на элемент с классом .block на мобильном устройстве. Для ПК такая функция будет аналогична, но с классом .desktop.
$('.desktop .block').click(function(){
//СЮДА КОД ФУНКЦИИ ДЛЯ КОМПЬЮТЕРА
});

Таким образом можете применять работу разных скриптов в зависимости от устройства. Сам скрипт можете скопировать с файла current-device.js и добавить в свои файлы или подключить отдельно.

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

Как изменить или отключить чекбокс — Сохранить моё имя, 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 Добавил: Андрей Ковальчук

В чем разница между mysqli_affected_rows и mysqli_num_rows?

Недавно я искал разницу и обнаружил, что в то время как yes mysqli_num_rows подсчитывает, сколько строк нашел ваш оператор SELECT .

mysqli_affected_rows will count how many rows your UPDATE/INSERT/DELETE/REPLACE and SELECT statement 'affected'.

Unless you are trying to compare between the number of rows returned in a SELECT statement vs. the number of rows affected in an UPDATE/INSERT/DELETE/REPLACE than there is no huge concern over which you need to be using. If you want to be semantically correct than use the appropriate one for the corresponding statement.

https://dev.mysql.com/doc/refman/8.0/en/mysql-affected-rows.html

For SELECT statements, mysql_affected_rows() works like mysql_num_rows()

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

MySQL функция CURDATE


В этом учебном пособии вы узнаете, как использовать MySQL функцию CURDATE с синтаксисом и примерами.

Описание
MySQL функция CURDATE возвращает текущую дату.

Синтаксис
Синтаксис MySQL функции CURDATE:

CURDATE( )

Параметры или аргументы
Для функции CURDATE нет параметров или аргументов.

Примечание
1. Функция CURDATE возвращает текущую дату в формате ‘YYYY-MM-DD’, если используется в контексте строки.
2. Функция CURDATE возвращает текущую дату в формате YYYYMMDD, если используется в числовом контексте.
3. Функция CURDATE является синонимом функции CURRENT_DATE.
Применение
Функция CURDATE может использоваться в следующих версиях MySQL:

MySQL 5.7, MySQL 5.6, MySQL 5.5, MySQL 5.1, MySQL 5.0, MySQL 4.1, MySQL 4.0, MySQL 3.23
Пример
Рассмотрим примеры MySQL функции CURDATE, чтобы понять, как использовать функцию CURDATE в MySQL.
Например:
mysql> SELECT CURDATE();

#Результат:   2017-05-11 

mysql> SELECT CURDATE()  0;

#Результат:   20170511 

mysql> SELECT CURDATE()  1;

#Результат:   20170512

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

Как вывести все записи и разбить их по рубриками 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 Добавил: Андрей Ковальчук

Эффект lightbox для галерей, скрипт увеличения изображений для галерей лендингов

На системах управления сайтом, так званых CMS, той же WordPress можно установить плагин, но на самописных страницах так не сделать. Поэтому данная библиотека вам может помочь. Вся библиотека это 2 файла, сам скрипт и стили CSS. Все это - baguetteBox, Страница baguetteBox на GitHub

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

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

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

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

//В ЯВА СРЕДУ
baguetteBox.run('.gallery');
 
//В HTML СРЕДУ
<script>
jQuery(function($){
baguetteBox.run('.gallery');
});
</script>

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

<ul class="gallery">
<li><a href="images/11.jpg"><img alt="Галерея" src="images/1.jpg"></a></li>
<li><a href="images/22.jpg"><img alt="Галерея" src="images/2.jpg"></a></li>
<li><a href="images/33.jpg"><img alt="Галерея" src="images/3.jpg"></a></li>
</ul>

Внутри списка размещаете ссылки внутри которых изображения. Задумка такая: изображение в теге img - это миниатюра, маленькая картинка, а уже в самой ссылке указан путь к большому изображению. То бишь в нашем примере изображение 1.jpg - это миниатюра, а 11.jpg это полное.

Ну и чтобы все это работало, остался последний шаг - подключение стилей нашей библиотеки лайтбокса. В скачанном вами архиве - это файл baguette.css. Подключите его к своему сайту или скопируйте стили и перенесите в свой файл стилей. Пример подключения:

<link href="baguette.css" type="text/css" rel="stylesheet">

Не забудьте указать свой путь к файлу, если он лежит не в корне, а в какой-то папке


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

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

baguetteBox.run('.gallery', {
    //СЮДА ОПЦИИ
});

У скрипта есть следующие опции, укажу основные, ознакомится всеми можно на странице самого скрипта на GitHub (Ссылка указана в начале статьи).

buttons: false, - По умолчанию true. Этот параметр отключает показ кнопок для перелистывания изображений, например, если вы хотите, чтобы показывались только по одному.
fullScreen: true, - По умолчанию false. Этот параметр включает показ галереи в полно экранном режиме. Поверх браузера.
noScrollbars: true, - По умолчанию false. Этот параметр отключает показ скролбара, полосы прокрутки на сайте, во время просмотра изображений.
animation: 'fadeIn', - По умолчанию slideIn. Этот параметр задает вид анимации перелистывании изображений.
async: true, - По умолчанию false. Этот параметр включает асинхронную подгрузку файлов.
Если их применять, то инициализация будет такой. Разделите параметры запятой, не забудьте!

baguetteBox.run('.gallery', {
animation: 'fadeIn',
noScrollbars: true,
buttons: false,
});

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

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

Как создать бота в Телеграм для получения оповещений с форм сайта

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

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

Как создать бота
1. Первым делом, у вас должен быть установлен мессенджер Telegram. На телефоне или ПК, а желательно и там и там. Я буду показывать на примере ПК, но на телефоне все то же самое.

2. Далее нужно найти через поиск в мессенджере главного бота, что создает других. Это BotFather - единственный бот, который управляет ими всеми. Используйте его для создания новых учетных записей ботов и управления существующими ботами. Найдите и нажмите на него, чтобы открылся его чат.

3. Теперь нужно запустить BotFather. Для этого нужно нажать кнопку ЗАПУСТИТЬ внизу чата или написать в чат /start, если вместо кнопки у вас поле для ввода.

4. После запуска появится список команд, переместитесь в начало сообщения и нажмите на команду /newbot или просто пропишите эту команду через поле сообщения.

5. Теперь BotFather предложит вам назвать своего бота. Это название вы будете видеть в списке контактов. В примере бот назван как testmailbot. Можете называть как угодно, например: Бот для формы контактов, Бот какого-то плагина, Мой бот с сайта и тд. Без разницы, лишь бы вы понимали что это за бот и если у вас их будет много, вы их не путали.

6. Далее BotFather предложит вам указать имя бота. Вот тут нужно быть внимательным. Имя бота вводится только латиницей и в конце должно заканчиваться на bot. В примере это testmailbot_bot. Задавайте что хотите, если имя будет существовать, BotFather вас предупредит. Так что придумайте что-то уникальное.

7. Если вы задали правильное имя, то BotFather напишет вам, что все готово и вашему боту присвоен Токен, который понадобится для доступа через HTTP API. Этот токен нам и нужен для того, чтобы формы отправляли свои данные в Телеграм.

8. Теперь найдем и запустим нашего бота. Для этого в поиске контактов в Telegram найдите бота и нажмите на него.

9. Так же нужно запустить бота. Внизу есть кнопка ЗАПУСТИТЬ или напишите в чат /start, если вместо кнопки у вас поле для ввода.

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

8. Чтобы добавить бота в групповой чат, если вы захотите иметь несколько ботов для нескольких форм, то вам нужно перейти в настройки Telegram и выбрать пункт - Создать группу.

9. Далее нужно ввести название для группы. Вводите какое вам нравится.

10. Теперь нужно добавить участников в группу, то бишь нашего бота. Есть 2 способа. Можно просто на странице самого бота нажать на его настройки и там выбрать пункт Добавить в группу. После чего вам предложит ваши собственные группы. Выберите ту что создали только что для ботов и все. Второй вариант - нажмите на настройки группы и выберите пункт - Добавить участников.

11. Перед вами появится окно поиска, введите в поле имя своего бота, то что вводили в пункте 6. Возможно, найдется несколько ботов, но только у одного будет точное название, в нашем примере это @testmailbot_bot. Когда найдете своего бота, выделите и нажмите кнопку - Добавить.

12. Последнее что нужно сделать чтобы передавать данные с форм которые поддерживают передачу на Телеграм, это получить ID чата. Тут два варианта. Если вы используете только чат бота, то ID один, если чат группы с ботами, то ID другой. Чтобы узнать нужный ID, нужно в адресной строке браузера перейти по ссылке, которую нужно сформировать.

https://api.telegram.org/botХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ/getUpdates

Вместо ХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ нужно вставить тот токен, который вам дал BotFather в пункте 7, этой инструкции.

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


12. Последнее что нужно сделать чтобы передавать данные с форм которые поддерживают передачу на Телеграм, это получить ID чата. Тут два варианта. Если вы используете только чат бота, то ID один, если чат группы с ботами, то ID другой. Чтобы узнать нужный ID, нужно в адресной строке браузера перейти по ссылке, которую нужно сформировать.

https://api.telegram.org/botХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ/getUpdates

Вместо ХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ нужно вставить тот токен, который вам дал BotFather в пункте 7, этой инструкции.

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

Рекомендую открывать ссылку в браузере Mozilla Firefox. В нем данные отображаются сгруппировано и очень легко понять где нужный ID. Где чат бота, где чат группы, если вы в нее добавили бота.


Как видите, по изображению видно что вначале показывает ID чата бота с моим именем, у вас будет с вашим, после того как вы напишите что-нибудь боту. Ну а далее ID группы, в которую мы добавили нашего бота в пункте 9/10.

Много непонятного, но среди этого кода нужно всего одно значение. Какое, зависит от того используете ли вы лишь бота или чат. Если только бота то ищите, ID такого типа - "id":380199086,"first_name". И з этого вам нужно только номер 380199086. Если у вас группа с ботами, то такого "id":-1011500162037. У ID груп стоит черточка в начале. Вам, опять же, нужен номер только с черточкой -1011500162037. Если, вдруг, вы добавили токен и ID в форму, а сообщения не приходят, то попробуйте другой. Сложностей не должно возникнуть.

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

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

Добавлено: 15 Мая 2021 07:58:40 Добавил: Андрей Ковальчук

Стилизация поля добавления файлов — input file

Все преобразование мы совершим с помощью стилей CSS и jQuery. Когда вы изучите материал, то увидите, что можно обойтись только CSS, но тогда не будет видно какой файл выбран. как раз для динамики и будет использоваться jQuery. Когда все будет закончится, результат будет примерно следующим:

И так не будем втягивать и приступим к нашей задаче.

Для начала нужна разметка HTML. У меня будет свой код, у вашей формы свой. Главное, вы должны заменить свое поле выбора файла на мое или подогнать свое под основные параметры моего. Обычное поле добавления файла выглядит примерно так:

<input type="file" name="file">

У нас же будет иметь следующий вид:
<div class="fl_upld">
<label><input id="fl_inp" type="file" name="file">Выберите файл</label>
<div id="fl_nm">Файл не выбран</div>
</div>

Давайте немножко разберем, что и как.

<div class="fl_upld"> - заключаем все в блок контейнер. Условие обязательное. Присваиваем блоку класс fl_upld.
<label><input id="fl_inp" type="file" name="file">Выберите файл</label> - наше поле прикрепления файла заключаем в label. Это наш и идентификатор поля. Самому полю присваиваем id="fl_inp". Тоже важный момент. Ну и добавляем текст - Выберите файл. Этот текст будет на будущей кнопке.
<div id="fl_nm">Файл не выбран</div> - блок, который изначально выводит текст - Файл не выбран. После выбора файла вместо этого текста появится название файла. данному блоку присваиваем id="fl_nm". Забегу наперед, скажу, что если не будете подключать скрипт для вывода имени файла, то можете не добавлять данный блок. У вас будет просто кнопка без динамики.
Далее добавляем несложные стили нашей кнопке. Просто добавьте следующий код в свой файл стилей:
.fl_upld{width:300px;}
#fl_inp{display:none;}
.fl_upld label{
cursor:pointer;
background:#36c;
border-radius:3px;
padding:10px 25px;
color:#fff;
font-weight:bold;
text-align: center;
}
.fl_upld label:hover{background:#fc0;}
#fl_nm{
margin-top:20px;
color:#f00;}

Быстро расскажу, что за что отвечает.

Для контейнера fl_upld устанавливаем ширину в 300px. Если это поле будет внутри вашей формы, у которой будет ширина, то в принципе можно эту строчку не писать и ширину не задавать.
#fl_inp{display:none;} - скрываем наше стандартное поле прикрепления файла. Это важный и единственный главный параметр.
Далее для .fl_upld label - пишем параметры. Идентификатор и станет нашей кнопкой. Прописываете все что хотите, чтобы сделать кнопку нужного вида.
.fl_upld label:hover{background:#fc0;} - стили для кнопки. кола на нее наводишь курсор. У нас она просто становится желтой.
Ну и напоследок для #fl_nm блока названия файла тоже добавляем параметры.
Вот и все стили, конечно же как и всегда можете менять их как угодно и подгонять под себя. Главный параметр - это скрыть стандартное поле. #fl_inp{display:none;}

Теперь приступим к последнему шагу, добавлению скрипта вывода имени файла при добавлении. Так как скрипт работает на jQuery, сначала нужно подключить библиотеку. если это уже сделано делать этого не нужно.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<p>Далее уже сам скрипт.</p>
 
<script>
$(document).ready( function() {
    $("#fl_inp").change(function(){
         var filename = $(this).val().replace(/.*\\/, "");
         $("#fl_nm").html(filename);
    });
});
</script>

Разберем немного сам скрипт.

$("#fl_inp") - во второй строке указываем айди нашего скрытого поля.
$("#fl_nm").html(filename); - в четвертой строке указываем айди последнего блока в котором будет выводится имя файла вместо текста - Файл не выбран. Мы делаем замену значения.
То есть нужно просто правильно указать два ID. Если Вы будете менять айди и классы на свои, то не запутайтесь и укажите везде правильно, чтобы все корректно работало. Сделав все правильно, результат не заставит себя ждать. Если вдуматься и понять все, то становится ясно, что сложного тут ничего нет.

Добавлено: 13 Мая 2021 07:18:41 Добавил: Андрей Ковальчук