• Выезжающее меню с анимацией?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Обычно это называют Elastic SVG/Menu. Вот демо на tympanus. Там же можно и статью найти, которая объясняет реализацию.

    Если нравиться больше видео версия, то на YouTube есть плейлист с аналогичным туториалом - ссылка
    66bd9ec52a42d919375208.gif
    Ответ написан
    2 комментария
  • Как сделать в помощью ACF Flexible content подобие конструктора страниц?

    AntonLitvinenko
    @AntonLitvinenko Автор вопроса
    HTML coder
    Для себя вопрос пока что решил таким образом
    Создал темплейт страницы для этого дела
    <?php 
    
    get_header(); 
    
    /*
    Template Name: Page Builder
    */
    
    ?>
    
    <?php if ( have_rows( 'builder_layout' ) ) : ?>
    
    	<?php while ( have_rows( 'builder_layout' ) ) : the_row(); ?>
    
    		<?php $layout = get_row_layout(); ?>
    
    		<?php get_template_part( "template-parts/builder-blocks/$layout" ); ?>
    
    	<?php endwhile; ?>
    
    <?php else: ?>
    
    		<h2><?php _e('No layout found parent', 'ajat') ?></h2>
    
    <?php endif; ?>
    
    
    <?php get_footer(); ?>

    В папке builder-blocks у меня пять файлов, полная ширина, одна колонка, две колонки, три колонки и 4 колонки.
    Вот например код файла на 2 колонки, остальные по аналогии
    <section class="section">
    	<div class="container">
    
    		<div class="row">
    
    			<div class="col-md-6">
    				<div class="content">
    					<?php if ( have_rows( 'column_1_page_layout' ) ) : ?>
    
    						<?php while ( have_rows( 'column_1_page_layout' ) ) : the_row(); ?>
    
    							<?php $layout = get_row_layout(); ?>
    
    								<?php get_template_part( "template-parts/acf-blocks/$layout" ); ?>
    
    						<?php endwhile; ?>
    
    					<?php else: ?>
    
    						<h2><?php _e('No layout found', 'ajat') ?></h2>
    
    					<?php endif; ?>
    				</div>
    			</div>
    
    			<div class="col-md-6">
    				<div class="content">
    					<?php if ( have_rows( 'column_2_page_layout' ) ) : ?>
    
    						<?php while ( have_rows( 'column_2_page_layout' ) ) : the_row(); ?>
    
    							<?php $layout = get_row_layout(); ?>
    
    								<?php get_template_part( "template-parts/acf-blocks/$layout" ); ?>
    
    						<?php endwhile; ?>
    
    					<?php else: ?>
    
    						<h2><?php _e('No layout found', 'ajat') ?></h2>
    
    					<?php endif; ?>
    				</div>
    			</div>
    
    		</div>
    	</div>
    </section>

    Тут у меня в каждой колонке уже выводятся темплейты из другой папки acf-blocks, это как раз те кусочки кода, например иконка + текст, просто текст, текст + изображение итд.
    Для каждого блока создана группа полей.

    Главная группа полей для билдера builder_layout. Это гибкое содержимое.
    В нем 5 блоков соответственно одной колонке, двум, трем итд, вот скриншот места с двумя колонками
    5fa3c04f46509011229880.png
    Можно заметить кое-какие поля которых нет в стандарте, в частности деление на колонки, это замечательный плагин ACF Extended.
    Далее два скриншота для колонок, обратите внимание, должен быть включен префикс для названий.
    5fa3c1223cdc2920434016.png
    5fa3c1339e645818585464.png
    Тут могут возникнуть вопросы.
    Изначально Это код из рабочего проекта и там сделаны блоки, которые я собрал в гибком содержании Layouts, собственно, для того чтобы вывести все блоки мне достаточно сделать тип поля клон и выбрать туда все поля группы полей layouts. Но можно и по отдельности накидать в зависимости от ширины колонок. Главная идея это использования типа поля КЛОН.
    Вот как-то так
    Ответ написан
    1 комментарий
  • Как перейти от ACF PRO на Gutenberg?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    ACF Pro помогает создавать блоки для Gutenberg с помощью PHP, это удобно и значительно ускоряет работу. Но если надо полностью отказаться от ACF Pro и использовать только Gutenberg, то придется запилить свои блоки (привет React) или же найти готовые, подходящие под ваши задачи.

    Впрочем, по некоторым блокам стоит выдохнуть и немного подумать - возможно стоит изменить свое мышление. К примеру, на ACF мы повторяющийся контент автоматом считаем рипитером и создаем соответствующие поля. А на Gutenberg часто repeater как таковой и не нужен - достаточно самого блока. Ведь создать несколько одинаковых блоков подряд в Gutenberg не составляет труда, это как бы встроено из коробки.

    Простой пример - блок testimonials. На ACF мы создаем обычно рипитер, в нем нужные поля которые будут повторяться, скажем - text, name, photo (текст отзыва, имя клиента и его аватар). А на gutenberg достаточно иметь блок testimonial с этими же полями, и просто вставить его X раз подряд - вот вам и повторяющиеся данные.
    Ответ написан
    Комментировать
  • Custom post type, как задать url на русском?

    @zudogav
    Скорее всего yoast тянет "doctors" из аргумента labels функции register_post_type.
    Ответ написан
    Комментировать
  • Как при отсутствии thumbnails в записи, выводить thumbnail заглушку?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Ответ Вадим Кот полностью подходит, если надо в конкретном месте шаблона разово запилить. Но если это должно быть как стандартное поведение везде, где есть post thumbnails, а сторонний плагин ставить не хочется, то лучше написать свою функцию. У меня она среди прочих полезных лежит в mu-plugin'е, но можно и в functions.php:
    /**
     * Display native post thumbnail or a fallback image.
     *
     * @param  string  $size
     * @param  string  $attr
     */
    function the_post_thumbnail_fallback( $size = 'post-thumbnail', $attr = '' )
    {
    	if ( has_post_thumbnail() ) :
    		echo get_the_post_thumbnail( null, $size, $attr );
    
    	else :
    		$post_thumbnail_id = get_option( 'default_post_thumbnail' );
    
    		$html = wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr );
    
    		/**
    		 * Filters the post thumbnail HTML.
    		 *
    		 * @param  string  $html  The post thumbnail HTML.
    		 * @param  int  $post_id  The post ID.
    		 * @param  string  $post_thumbnail_id  The post thumbnail ID.
    		 * @param  string|array  $size  The post thumbnail size. Image size or array of width and height values (in that order). Default 'post-thumbnail'.
    		 * @param  string  $attr  Query string of attributes.
    		 * @since 2.9.0
    		 */
    		echo apply_filters( 'post_thumbnail_html', $html, null, $post_thumbnail_id, $size, $attr );
    
    	endif;
    }

    В шаблонах просто используем эту функцию вместо the_post_thumbnail(), включая необходимые параметры (размер и тд):
    <header class="post-header">
        <h1 class="post-title">
            <?php the_title(); ?>
        </h1>
    
        <div class="post-thumbnail">
            <?php the_post_thumbnail_fallback(); ?>
        </div>
    </header>

    В самой функции the_post_thumbnail_fallback() обратите внимание на строчку
    $post_thumbnail_id = get_option( 'default_post_thumbnail' );

    Сама картинка загружена через медиабиблиотеку, ее ID хранится в wp_options. У меня это реализовано в настройках (как и в плагине, на который ссылается Вадим Кот), но можно захардкодить ID прямо в этой функции. HTML создается нативной wp_get_attachment_image(), идентично тому что создаст the_post_thumbnail() потому что она использует эту же функцию.

    Также здесь у нас сохранен фильтр post_thumbnail_html, с помощью которого сторонние плагины могут модифицировать html-код тега img - а это могут быть вполне полезные фичи - SEO, css-классы (например для lazyload), responsive и тд.
    Ответ написан
    Комментировать
  • Как отобразить количество фотографий в открытой галерее Nextgen Gallery (Wordpress)?

    mistype
    @mistype Автор вопроса
    Сам спросил, сам ответил) Оставляю решение вопроса, вдруг поможет кому-нибудь)))
    В общем, все очень просто:

    <?php
      global $wpdb;
      // Количество всех фото на сайте
      $imagescount    = intval( $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->nggpictures") ); 
      // Количество всех галерей на сайте
      $galleriescount = intval( $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->nggallery") ); 
      // Количество изображений в открытой галерее
      $total = $displayed_gallery->get_entity_count();
    ?>


    Ну и дальше "эхом" выводим, то что нужно будет.
    <?php echo $total; ?>

    Надеюсь, кто-то потратит меньше времени, чем я на это)) Я сутки точно убил))
    Ответ написан
    1 комментарий
  • Как сделать личный кабинет с услугами в WordPress?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Здравствуйте!
    мне нужно сделать функцию личного кабинета для каждого пользователя

    плагин Wp Recall для создания ЛК
    https://ru.wordpress.org/plugins/wp-recall/

    которые смогут регистрироваться сами по номеру телефона или по электронной почте.

    по эл. почте проблем нет, а вот, по номеру телефона с последующей отправкой смс для подтверждения - смотрите в сторону интеграции с АПИ стороннего сервиса.

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

    Кастомный тип записи + кастомные поля (ACF). Для самой формы можете использовать acf_form()
    https://ru.wordpress.org/plugins/advanced-custom-f...

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

    Все так же сводится к кастомным типам записей и к boolean вкл / выкл (+ дата подключения, дата исстечения)

    Если нужно оплату принимать сразу на сайте, то либо напишите платежный шлюз для выбранной платежной системы, либо вукомерц с выбранным плагином оплаты.
    Ответ написан
    Комментировать
  • Click добавить класс active и удалить?

    @MrColdCoffee
    web
    $("#menu-link").on("click", "button", function(){
        let is_active = false;
        
       if( $(this).hasClass('active') ){ is_active = true; }
        
       $("#menu-link button").removeClass('active');
       
     if(!is_active){  $(this).addClass('active');  }
    
    
        });
    Ответ написан
    6 комментариев
  • Wordpress меню активный класс для подменю?

    pLavrenov
    @pLavrenov
    Разработка сайтов
    Хуки меню почти на все случаи.

    wp_nav_menu([
        'theme_location' => 'top_left',
        'container'=> false,
        'items_wrap' => '<ul class="nav navbar-nav %2$s">%3$s</ul>',
        'menu_class' => '',
        'ul_class' => 'navbar-nav',
        'ul_child_class' => 'dropdown-menu',
        'li_class' => 'nav-item',
        'li_child_class' => 'nav-item',
        'a_class' => 'nav-link',
        'a_child_class' => 'nav-link',
    ]);


    ## Добавление стилей для стандартного меню
    add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);
    function add_menu_list_item_class($classes, $item, $args) {
        if (property_exists($args, 'li_class') && !$item->menu_item_parent) {
            $classes[] = $args->li_class;
        }
        if (property_exists($args, 'li_child_class') && $item->menu_item_parent) {
            $classes[] = $args->li_child_class;
        }
        return $classes;
    }
    
    add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
    function add_menu_link_class( $atts, $item, $args ) {
        if ( strpos( $atts['href'], home_url() ) === false ) {
            $atts['target'] = '_blank';
        }
        if (property_exists($args, 'a_class') && !$item->menu_item_parent) {
            $atts['class'] = $args->a_class;
        }
        if (property_exists($args, 'a_child_class') && $item->menu_item_parent) {
            $atts['class'] = $args->a_child_class;
        }
        return $atts;
    }
    
    add_filter( 'nav_menu_submenu_css_class', 'my_nav_menu_submenu_css_class', 1, 3);
    function my_nav_menu_submenu_css_class($classes, $args, $depth) {
        if (property_exists($args, 'ul_child_class')) {
            $classes[] = $args->ul_child_class;
        }
        return $classes;
    }
    Ответ написан
    Комментировать
  • Как вывести рубрики со статьями?

    artzolin
    @artzolin Куратор тега WordPress
    php, WordPress разработка сайтов artzolin.ru
    $args = array(
    	'taxonomy' => 'category',
    	'hide_empty' => true, // не пустые
    	'exclude' => [1], // исключаем Без рубрики
    );
    
    $terms = get_terms( $args );
    
    if ( $terms ) {
    	foreach( $terms as $term ) {
    
    		$args =  array(
    			'posts_per_page' => 3, // по три поста
    			'post_type' => 'post', // тип записи "посты"
    			'post_status' => 'publish', // опубликованные посты
    			'tax_query' => array(
    				array(
    					'taxonomy' => 'category',
    					'field'    => 'id',
    					'terms'    => $term->term_id
    				)
    			)
    		);
    
    		$query = new WP_Query( $args );
    
    		if ( $query->have_posts() ) {
    
    			echo '<h2>' . $term->name . '</h2>';
    
    			while ( $query->have_posts() ) {
    				$query->the_post();
    				echo '<li>' . get_the_title() . '</li>';
    			}
    
    		} else {
    			// Постов не найдено
    		}
    
    	}
    }
    Ответ написан
    1 комментарий
  • Как вывести рубрики со статьями?

    tyoma_koder
    @tyoma_koder
    выводишь категории
    https://wp-kama.ru/function/get_categories
    для каждой категории получаешь записи, указав id категории
    https://wp-kama.ru/function/get_posts
    Ответ написан
    2 комментария
  • Как создать второй "single.php" в WP?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Шаблон: single-{post-type}.php
    Conditional tag: is_singular( 'post-type' );

    У the_permalink() нету таких функций.

    Каких "таких функций"? Эта функция получает объект WP_Post $post и собирает правильную ссылку.
    Ответ написан
    1 комментарий
  • Как сделать несколько Swiper Slider на странице?

    0xD34F
    @0xD34F
    Попробуйте заменить

    el: '.slidernav'

    на что-то вроде

    el: this.querySelector('.slidernav')

    Ну, то есть - найдите элемент пагинации текущего слайдера вместо того, чтобы указывать сразу все для всех.
    Ответ написан
    3 комментария
  • Select выбор option, открыть нужный select?

    @Aricus
    Есть два варианта. Первый - подгрузка по ajax по значениям из базы данных.
    Второй - создать все дочерние списки сразу. Тогда нужно в каждый дочерний список добавить data-атрибут со значением, равным value в option. При изменении родительского списка скрыть все дочерние и показать нужный.
    Спросите, если что-то непонятно.
    Ответ написан
    9 комментариев
  • Почему не работает svgSprite?

    serii81
    @serii81 Автор вопроса
    Я люблю phр...
    Наше ошибку, дело в том, что плагин называется gulp-svg-sprites, а я раньше установил gulp-svg-sprite, им и пользовался. Поэтому ничего и не происохдило. Теперь установил другой плагин, и все заработало.
    Ответ написан
    Комментировать
  • Wordpress contact form 7 отправка при выборе checkbox?

    vova87
    @vova87
    Разработка сайтов на wordpress
    1. создаете хук wpcf7_before_send_mail
    2. в нем определяете форму и какие данные заполнены.
    3. в зависимости от заполненных данных (телефон, телеграм, ватсап, email) выполняете нужное действиие.
    Ответ написан
    2 комментария
  • Как сделать плавающий placeholder contact form 7?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Обычно сначала я отключаю автоматическое создание параграфов вокруг полей
    add_filter('wpcf7_autop_or_not', '__return_false');


    Я добавляю некоторые элементы и классы в разметку
    <div class="form-group">[text* contact-name id:contact-name class:form-control class:input-text]<label for="contact-name">Name</label></div>
    <div class="form-group">[email* contact-email id:contact-email class:form-control class:input-text]<label for="contact-email">Email</label></div>
    <div class="form-group">[textarea contact-message x2 id:contact-message class:form-control class:input-text]<label for="contact-message">Message</label></div>
    <div class="form-submit">[submit class:gradient-btn class:btn-submit "Send Message"]</div>


    Стили
    .contact-form-wrapper .wpcf7 .form-group > label {
      position: absolute;
      top: 20px;
      left: 0;
      cursor: text;
      pointer-events: none;
      margin-bottom: 0;
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
    }
    
    .contact-form-wrapper .wpcf7 .form-group.active > label {
      top: -5px;
      left: 2px;
      font-size: 16px;
      cursor: default;
    }
    Ответ написан
    6 комментариев
  • Как сделать плавающий placeholder contact form 7?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Решается с помощью :placeholder-shown

    Ответ написан
    2 комментария