Ответы пользователя по тегу WordPress
  • Как сделать радио кнопки в Contact form 7 в таком виде?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Разверну немного комментарий.
    Чтобы застилить радиокнопки в CF7 без плагинов придется юзать стандартную разметку
    Вот такой шорткод
    [radio radio-637 use_label_element default:1 "Telegram" "Facebook" "Viber"]

    Отдаст вот такую разметку
    <span class="wpcf7-form-control-wrap radio-637">
    	<span class="wpcf7-form-control wpcf7-radio">
    		<span class="wpcf7-list-item first">
    			<label>
    				<input type="radio" name="radio-637" value="Telegram" checked="checked">
    				<span class="wpcf7-list-item-label">Telegram</span>
    			</label>
    		</span>
    		<span class="wpcf7-list-item">
    			<label>
    				<input type="radio" name="radio-637" value="Facebook">
    				<span class="wpcf7-list-item-label">Facebook</span>
    			</label>
    		</span>
    		<span class="wpcf7-list-item last">
    			<label>
    				<input type="radio" name="radio-637" value="Viber">
    				<span class="wpcf7-list-item-label">Viber</span>
    			</label>
    		</span>
    	</span>
    </span>

    У ее обертки есть класс по имени группы радиокнопок, но можно завернуть еще и в свою обертку.
    у первого и последнего элемента есть классы first и last соответственно, к остальным придется стучать через nth-child().
    Расположение элементов позволяет скрыть стандартную радиокнопку и стилить идущий за ней span c классом wpcf7-list-item-label через + как все делают. Небольшой пример стилей, тут я отталкиваюсь от обертки custom-checkbox
    Тыц

    .custom-checkbox label {
      display: block;
    }
    
    .custom-checkbox .wpcf7-list-item {
      display: block;
    }
    
    .custom-checkbox input[type="radio"],
    .custom-checkbox input[type="checkbox"] {
      position: absolute;
      z-index: -1;
      opacity: 0;
      position: absolute;
    }
    
    .custom-checkbox .wpcf7-list-item-label {
      display: block;
      position: relative;
      padding-left: 35px;
      padding-right: 10px;
      cursor: pointer;
      font-size: 1.125rem;
      color: #0d0c0c;
      margin-bottom: 10px;
    }
    
    .custom-checkbox .wpcf7-list-item-label::before {
      content: '';
      position: absolute;
      top: 5px;
      left: 0px;
      width: 21px;
      height: 21px;
      line-height: 21px;
      text-align: center;
      border-radius: 50%;
      background-color: #EDEDED;
      font-size: 18px;
      color: #999;
    }
    
    .custom-checkbox input[type="checkbox"] + .wpcf7-list-item-label::before {
      border-radius: 0;
    }
    
    .custom-checkbox input[type="radio"] + .wpcf7-list-item-label::after {
      content: '';
      position: absolute;
      top: 9px;
      left: 4px;
      width: 13px;
      height: 13px;
      line-height: 13px;
      border-radius: 50%;
      background-color: #999;
      opacity: 0;
    }
    
    .custom-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
      content: '\2714';
    }
    
    .custom-checkbox input[type="radio"]:checked + .wpcf7-list-item-label::after {
      opacity: 1;
    }

    Ответ написан
    Комментировать
  • Как сделать нумерацию записей в виджете Wordpress?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    <?php if ( have_posts() ) : $ir = 1; while ( have_posts() ) : the_post();
    
      echo $ir;
    
    $ir++; endwhile; endif; ?>
    Ответ написан
    Комментировать
  • Как реализовать размещение своих меток на карте?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Снова гуглю за вас, мой генераль
    https://support.google.com/mymaps/answer/3024925?c...
    Ответ написан
    Комментировать
  • Как выводить поля Woocomerce в любом месте сайта?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Продукты в woocommerce это просто кастомный тип записи product. Точно так же категории это кастомная таксономия для кастомного типа записи. Просто берите тип записи, вставляйте в wp_query и делайте что задумали.
    А ещё у woocommerce хороший набор шорткодов с кучей настроек, которые так же можно использовать в любом месте
    https://docs.woocommerce.com/document/woocommerce-...
    Ответ написан
    Комментировать
  • Как добавить кастомные поля через ACF к метке?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Насколько я помню по умолчанию acf не работает ни с архивами категорий, ни с архивами тегов. Я решал это момент с помощью options рage, хотя для категорий есть плагин-расширение. Вообще для acf очень много дополнительных плагинов, глянуть можно тут
    https://www.awesomeacf.com/
    Ответ написан
    Комментировать
  • Как настроить редактор для постов в wordpress?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Добавьте параметр
    show_in_rest => true, только с кавычками как положено и куда положено
    Ответ написан
    Комментировать
  • Как подтянуть в шаблон стили из админки?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Я только что перепроверил на голой теме, написаной на underscores - стили гутенберга подключаются на уровне ядра, лежат по такому пути /wp-includes/css/dist/block-library/style.min.css.

    Вот выдержка из документации:

    #Default block styles
    Core blocks include default structural styles. These are loaded in both the editor and the front end by default. An example of these styles is the CSS that powers the columns block. Without these rules, the block would result in a broken layout containing no columns at all.

    The block editor allows themes to opt-in to slightly more opinionated styles for the front end. An example of these styles is the default color bar to the left of blockquotes. If you’d like to use these opinionated styles in your theme, add theme support for wp-block-styles:
    add_theme_support( 'wp-block-styles' );
    https://developer.wordpress.org/block-editor/devel...

    Ищите у себя где отключено, возможно с помощью подобного кода в функциях:
    // remove Gutenberg styles
    function remove_gutenberg_styles() {
    	wp_dequeue_style( 'wp-block-library' );
    }
    add_action( 'wp_enqueue_scripts', 'remove_gutenberg_styles', 100 );
    Ответ написан
    1 комментарий
  • Помощь по вордпрессу, где найти?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    У вас используется тема Woodmart. Судя по классам и стилям этих кнопок это встроенный функционал темы.
    У этой темы огромный дашборд с настройками ищите там то что связано с socials
    https://xtemos.com/docs/woodmart/theme-settings-pa...
    Также тема поддерживает кастомные хедеры, это скорее всего как раз будет там
    https://xtemos.com/docs/woodmart/header-builder/wo...
    Ответ написан
    Комментировать
  • Выезжающий сайдбар на мобильном?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    CosKrem,
    // вывод сортировки и кнопки переключателя фильтра
    remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
    add_action('woocommerce_before_shop_loop', 'storm_catalog_ordering', 30);
    function storm_catalog_ordering() {
    	?>
    		<div class="catalog-sorting-wrapper">
    
    			<button type="button" class="fixed-toggle filter-toggle" id="filter-toggle">
    				<i class="fa fa-filter"></i><?php _e('Filter','storm-store') ?>
    			</button>
    
    			<div class="product-sorting">
    				<span class="product-sorting-label"><?php _e('Сортировать:','storm-store') ?></span>
    				<div class="select-wrapper">
    					<?php woocommerce_catalog_ordering() ?>
    				</div>
    			</div>
    
    		</div>
    	<?php
    }

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

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    В стандартном функционале категории в сайдбаре работают с перезагрузкой. Без перезагрузки могут работать плагины, ищите ajax product filter.
    Изображение можно выпилить, используя хуки woocommerce
    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

    Или тоже плагином
    Ответ написан
    Комментировать
  • В чем особенность верстки под WordPress?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    По сути нет прям таких особенностей, кроме, пожалуй, того, что в контентных тегах не должно быть классов, тоесть, все что может быть выведено из статьи функцией the_content() должно быть оформлено по тегам, завязанным на общий класс обертки контента.
    С другой стороны, когда точно знаешь, что вёрстка под вордпресс, то можно упростить задачу себе или тому, кто будет интегрировать и в каких-то местах использовать те классы, которые использует вордпресс. Самый яркий пример это многоуровневое меню - для того чтобы его посадить придётся разобрать класс walker_nav_menu, и на основе его написать свое решение. Всё остальное обычно сложностей не вызывает.
    Бывает наоборот - в вёрстке ты используешь случайно класс, который есть в вордпресс, например cat-item, и неожиданно список категорий в виджет получает ненужное оформление
    Ответ написан
    Комментировать
  • Как в плагине Polylang переводить пункты навигации?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Погуглил за вас, мой генераль
    https://polylang.pro/doc/create-menus/
    Ответ написан
    Комментировать
  • Как подключить скрипт после скриптов Woocommerce?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Чтобы подключить скрипт после определенного скрипта нужно посмотреть его ID и добавить в зависимости
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/assets/js/common.js', array('jquery', 'woocommerce-js'), null, true );
    Ответ написан
    Комментировать
  • Вывод записей Custom Post Type если стоит галочка ACF?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Не выводит потому что ваше поле отдает true или false а вы его сравниваете со строкой 'yes'.
    ваша проверка должна быть всего лишь
    <?php if ( get_field('name_field') ): ?>
    Ответ написан
  • Как дорабатывать/изменять купленную премиум тему WordPress и не выстрелить себе в ногу?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    И тем не менее, рекомендую создать дочернюю тему и вносить правки уже в ней
    Ответ написан
    Комментировать
  • Какой плагин для WordPress выбрать?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Я в последнем проекте использовал вот этот плагин, выбирал из штук пяти, моей задачей была возможность рейтить записи или страницы, чтобы хорошо кастомизировалась форма, ибо мне нужно было попасть в дизайн.
    https://wordpress.org/plugins/site-reviews/
    Понравились возможности настройки и кастомизации.
    Не знаю поддерживает ли он сниппеты гугл, уж сами гляньте в документации.
    Ответ написан
    Комментировать
  • Как сделать перевод темы Wordpress?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    При создании темы, для которой планируется мультиязычность обычно в корне темы должна быть папка languages, в которой лежит файл перевода theme-name.pot. Если использовать underscores, то файл будет и подключение в functions тоже будет.
    В functions.php на хук after_setup_theme должна быть функция
    load_theme_textdomain( 'theme-name', get_template_directory() . '/languages' );

    где theme-name это текстовый домен темы.
    Для того чтобы подготовить текст к переводу его нужно завернуть в одну из функций перевода, например
    <?php _e('Тут пишем текст, который потом нужно будет переводить', 'theme-name') ?>
    Собственно все, подготовка закончена. Далее работа с переводом.
    Наиболее удобный плагин Loco Translate.
    Инструкций по работе с ним в интернете валом
    Ответ написан
  • Как сделать в помощью 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. Но можно и по отдельности накидать в зависимости от ширины колонок. Главная идея это использования типа поля КЛОН.
    Вот как-то так
    Ответ написан
    Комментировать
  • Как вывести самые популярные посты?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Для начала определить критерий, по которому посты станут популярными. Например количество просмотров.
    А дальше обычный цикл, в аргументах которого есть meta_key из функции подсчета просмотров post_views_count и соответственно сортировка по значению этого ключа meta_value_num.
    $popularLoop = new WP_Query(array(
    	'posts_per_page' => 5,
    	'meta_key'       => 'post_views_count',
    	'orderby'        => 'meta_value_num',
    	'post_type'      => 'post',
    	'order'          => 'DESC',
    	'date_query'     => array(
    		array(
    			'after' => '-15 days',
    		)
    	)
    ));
    
    if ( $popularLoop->have_posts() ) : ?>
    
    	<h2 class="sidebar-title"><?php _e('Найбільше читають', 'viche') ?></h2>
    
    	<?php while ( $popularLoop->have_posts() ) : $popularLoop->the_post(); ?>
    
    	<a href="<?php the_permalink() ?>">
    		<div class="news-popular-block">
    			<div class="img-wrapper">
    				<?php if (has_post_thumbnail()) {
    					the_post_thumbnail('popular-thumb');
    				}?>
    			</div>
    			<div class="news-popular-text">
    				<h3 class="news-popular-title"><?php trim_title_words(10, '...'); ?></h3>
    				<div class="news-block-info-item news-block-date">
    					<?php _e('Переглядів:', 'viche') ?> 
    					<?php echo getPostViews(get_the_ID()); ?>
    				</div>
    			</div>
    		</div>
    	</a>
    
    	<?php endwhile;?>
    
    </div>
    
    <?php endif; wp_reset_query(); ?>
    Ответ написан