Задать вопрос
  • Как сделать чередование постов из разных циклов(условий/такс)?

    artzolin
    @artzolin Куратор тега WordPress
    php, WordPress разработка сайтов artzolin.ru
    Проще всего заказать из базы конкретные ids в определенном вами порядке, иначе вы вряд ли сможете гарантировать, что записи разных типов придут вам в нужном порядке

    $args = [
    	'post_type' => ['post','service'],
    	'post__in' => [5,12,2,14,7],
    	'orderby' => 'post__in',
    ];
    
    $loop = new WP_Query( $args );


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

    if ( get_post_type() === 'service' ) {
    	get_template_part( 'templates/archive/archive-service' );
    } else {
    	get_template_part( 'templates/archive/archive-common' );
    }


    Если типов записей много, то можно сделать так

    $post_type = get_post_type();
    
    if ( file_exists( get_theme_file_path( 'templates/archive/archive-' . $post_type . '.php' ) ) ) {
    	get_template_part( 'templates/archive/archive-' . $post_type );
    } else {
    	get_template_part( 'templates/archive/archive-common' );
    }
    Ответ написан
    Комментировать
  • Есть ли хорошие готовые preloader с печатающимся текстом?

    Stalker_RED
    @Stalker_RED
    Там кода на пять строк. Что вам нужно от "готового"?
    Ответ написан
    1 комментарий
  • Как сделать динамический запрос в WP_Query?

    Ну по сути - здесь можно сделать шорткод

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

    // Shortcode for projects [projects-list posts="3"]
    function projects_listing_parameters_shortcode( $atts ) {
        ob_start();
    
        $args = shortcode_atts( array (
            'type' => 'projects',
            'posts' => 6,
            'cat' => ''
        ), $atts );
    
        $options = array(
            'post_type' => $args['type'],
            'posts_per_page' => $args['posts'],
            'tax_query' => array(
                array (
                    'taxonomy' => 'project',
                    'field' => 'slug',
                    'terms' => $args['cat'],
                )
            ),
        );
    
        $query = new WP_Query( $options );
    
        if ( $query->have_posts() ) $item = 0; {
            while ( $query->have_posts() ) : $query->the_post(); $item++;
                echo '<div class="item item-' . $item . '">';
                    get_template_part( 'template-parts/project-cards', get_post_format() );
                echo '</div>';
            endwhile;
            wp_reset_postdata();
            $myvariable = ob_get_clean();
            return $myvariable;
        }
    }
    add_shortcode( 'projects-list', 'projects_listing_parameters_shortcode' );
    Ответ написан
    Комментировать
  • Как вставить div в тему WordPress?

    artzolin
    @artzolin Куратор тега WordPress
    php, WordPress разработка сайтов artzolin.ru
    Чтобы файлы не затерлись при обновлении нужно создать дочернюю тему

    В functions.php нужно добавить подключение скриптов и стилей на хуке wp_enqueue_scripts так:

    add_action( 'wp_enqueue_scripts', 'custom_scripts' );
    function custom_scripts() {
    
    	// Сюда стили
    	wp_enqueue_style( 'newstyle', get_template_directory_uri() . '/assets/css/custom_style.min.css' );
    
    	// Сюда скрипты
    	wp_enqueue_script( 'newscript', get_template_directory_uri() . '/assets/js/custom_script.min.js' );
    
    	// сюда инициализацию или отдельным файлом как выше
    	$newscript_init = 'jQuery(function($) {
    
    	});';
    	wp_add_inline_script( 'newscript', $newscript_init );
    
    }


    Вывод формы можно добавить на хук wp_footer так:

    add_action( 'wp_footer', 'the_popup_form', 1 );
    function the_popup_form() { ?>
    
    	<div id="popup" class="mfp-hide popup">
    		<form id="popup-form" class="popup-form">
    
    			<!-- ... -->
    
    		</form>
    	</div>
    
    <?php }
    Ответ написан
    9 комментариев
  • С чего начать изучения анимации svg?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    По сути SVG - это почти HTML (ок, нехорошо так говорить, но тем не менее). Дерево из тегов, атрибуты, все дела. Выбираем нужные элементы, меняем атрибуты - вот и вся анимация. Как и с любыми другими элементами на странице. Это не какой-то отдельный и ни на что не похожий тип анимаций.

    Есть три варианта анимирования SVG в рамках фронтенда, два идентичных обычному HTML, и один дополнительный, привнесенный извне:

    1. CSS. Картинку, вставленную в страницу, можно анимировать с помощью CSS в каких-то пределах. Не все так получится сделать, но какие-то простые движения, изменения цветов - вполне можно. Если вы знаете CSS - можно сказать, что уже знаете все, что тут можно сделать.
    2. JS. Все как всегда. Получаем элементы через querySelector, getElementBy... и.т.д., и через setAttribute задаем элементам SVG нужные атрибуты. Обычно удобно добавить какой-то инструмент для интерполяций значений во времени. Из популярного - GSAP и Anime.js. При желании можно что-то свое написать, если задачи совсем простые, в базовом варианте все подобные инструменты строятся примерно по такому принципу. Некоторые инструменты добавляют какие-то еще свои дополнительные возможности, или есть готовые прикольные примеры, сделанные с их использованием, как например у d3.js, но нужны ли они лично вам - нельзя сказать, не зная задач. А инструменты должны выбираться исходя из этих самых задач, а не из моды. Здесь важно лишь понимать, что никакие библиотеки не расширяют сам формат SVG, не привносят никаких принципиально новых возможностей в него, они все больше про организацию скриптов.
    3. Еще есть SMIL. Это древнее зло из миров, далеких фронтенду. Есть хороший туториал на CSS-tricks. Это все "модно-нативно", но иногда сложно синхронизировать с остальными событиями на странице, и сложно отлаживать, т.к. нет адекватной привязки к инструментам разработчика в браузерах.


    Полезно еще познакомиться с вот этой статьей, там отмечены некоторые косяки, связанные с кроссбраузерностью. Да, SVG - это штука, которая вроде бы была с нами всегда, но в контексте анимирования wtf-моментов там все еще достаточно.

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

    Ну и полезно познакомиться с каким-нибудь векторным графическим редактором, чтобы уметь структурировать SVG перед анимированием, удалять мусор, адаптировать контуры для морфинга (не всегда дизайнер будет предоставлять полный набор нужных контуров).
    Ответ написан
    1 комментарий
  • Сортировка пользователей по алфавиту, в админки как это сделать на Wordpress?

    artzolin
    @artzolin Куратор тега WordPress
    php, WordPress разработка сайтов artzolin.ru
    Вы можете поправить параметры глобального запроса юзеров на хуке pre_get_users

    add_action( 'pre_get_users', 'custom_pre_get_users', 1 );
    function custom_pre_get_users( $query ) {
    
    	if ( is_admin() && $query->is_main_query() )
    		$query->set( 'orderby', 'nicename' );
    
    }


    Можно указать: include, nicename, email, url, registered, display_name, post_count, meta_value, meta_value_num, $meta_key
    Ответ написан
    3 комментария
  • Как сделать что бы при переходе срабатывала якорная ссылка?

    godsplan
    @godsplan
    Можно например в ссылке указать так
    <a href="/reviews#reviews"> </a>
    Ответ написан
    1 комментарий
  • Как реализовать такого плана прогресс бар в слайдере?

    Get-Web
    @Get-Web Куратор тега JavaScript
    Front-End Developer
    Примерно так:
    Ответ написан
    Комментировать
  • Как заставить убрать двойной бордер между дивами?

    @anton99zel
    29а класс средней школы №7
    Ответ написан
    Комментировать
  • Как реализовать галлерею в вордресс по своей сетке?

    deniscopro
    @deniscopro Куратор тега WordPress
    WordPress-разработчик, denisco.pro
    С помощью фильтра post_gallery.

    Пример:
    <?php
    function my_post_gallery( $output, $attr, $instance ) {
    	$_attachments = get_posts( array('include' => $attr['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => $attr['orderby']) );
    
    	$attachments = array();
    	foreach ( $_attachments as $key => $val ) {
    		$attachments[$val->ID] = $_attachments[$key];
    	}
    
    	if ( empty( $attachments ) ) {
    		return '';
    	}
    
    	ob_start();
    	?>
    	<div class="gallery">
    		<?php
    		foreach ( $attachments as $i => $image ) :
    			$url = wp_get_attachment_url( $image->ID );
    			?>
    			<a href="<?php echo $url; ?>" class="gallery-item">
    				<?php echo wp_get_attachment_image( $image->ID, 'thumbnail' ); ?>
    			</a>
    		<?php endforeach; ?>
    	</div>
    	<?php
    	$output = ob_get_contents();
    	ob_end_clean();
    
    	return $output;
    }
    
    add_filter( 'post_gallery', 'my_post_gallery', 10, 3 );
    Ответ написан
    Комментировать
  • Как заставить slick-slider срабатывать при ресайзе страницы?

    ProjectSoft
    @ProjectSoft
    Front-end && Back-end разработчик
    // Подпишемся на ресайз и продиспатчим его для запуска
    $(window).on('resize', function(e){
    	// Переменная, по которой узнаем запущен слайдер или нет.
    	// Храним её в data
    	var init = $(".card-box").data('init-slider');
    	// Если мобильный
    	if(window.innerWidth < 480){
    		// Если слайдер не запущен
    		if(init != 1){
    			// Запускаем слайдер и записываем в data init-slider = 1
    			$('#card-box').slick({
    				infinite: true,
    				slidesToShow: 1,
    				slidesToScroll: 1
    			}).data({'init-slider': 1});
    		}
    	}
    	// Если десктоп
    	else {
    		// Если слайдер запущен
    		if(init == 1){
    			// Разрушаем слайдер и записываем в data init-slider = 0
    			$('#card-box').slick('unslick').data({'init-slider': 0});
    		}
    	}
    }).trigger('resize');

    https://monosnap.com/file/Jw6PomDPOuv54bY25640JxAz...
    Ответ написан
    4 комментария
  • При вставке изображения через background очень сильно теряется качество, появляется зернистость. пиксельные края элементов и тд. Как решить проблему?

    houseprog
    @houseprog
    Веб-разработчик
    Перед вставкой изображения в CSS background-image, предварительно следует подготовить его - масштабировать до нужного размера средствами PHP или JS. Например, на хостинг можно положить скрипт, resize-image.php а путь к изображению указывать так: resize-image.php?pathimage=images/photo1.jpg&width=200&height=200

    В результате изображение будет вставляться в background-image уже нужного размера и браузеру не придется его масштабировать самостоятельно(с чем он справляется как вы верно заметили не очень).

    Скрипт на PHP может выглядеть так:

    <?php
    
    function img_resize($src, $dest, $width, $height, $rgb = 0xFFFFFF, $quality = 100) {  
    	    if (!file_exists($src)) {  
    	        return false;  
    	    }  
    	    $size = getimagesize($src);  
    
    	    if ($size === false) {  
    	        return false;  
    	    }  
    
    	    $format = strtolower(substr($size['mime'], strpos($size['mime'], '/') + 1));  
    	    $icfunc = 'imagecreatefrom'.$format;  
    	    if (!function_exists($icfunc)) {  
    	        return false;  
    	    }  
    
    	    if($width==0)if($size[0]<=800)$width=$size[0];else $width=800;
    	    if($size[0]<$width)$width=$size[0];  
    	    if($size[1]<$height)$height=$size[1];  
    
      
    	    $x_ratio = $width  / $size[0];  
    	    $y_ratio = $height / $size[1];  
      
    	    if ($height == 0) {  
      
    	        $y_ratio = $x_ratio;  
    	        $height  = $y_ratio * $size[1];  
      
    	    } elseif ($width == 0) {  
      
    	        $x_ratio = $y_ratio;  
    	        $width   = $x_ratio * $size[0];  
      
    	    }  
      
    	    $ratio       = min($x_ratio, $y_ratio);  
    	    $use_x_ratio = ($x_ratio == $ratio);  
      
    	    $new_width   = $use_x_ratio  ? $width  : floor($size[0] * $ratio);  
    	    $new_height  = !$use_x_ratio ? $height : floor($size[1] * $ratio);  
    	    $new_left    = $use_x_ratio  ? 0 : floor(($width - $new_width)   / 2);  
    	    $new_top     = !$use_x_ratio ? 0 : floor(($height - $new_height) / 2);  
      
    	    $isrc  = $icfunc($src);  
    
    	    $idest = imagecreatetruecolor($width, $height);  
    
    	    imagefill($idest, 0, 0, $rgb);  
    
    	    imagecopyresampled($idest, $isrc, $new_left, $new_top, 0, 0, $new_width, $new_height, $size[0], $size[1]);  
    
    	    header("Content-type: image/jpeg");
    	    imagejpeg($idest);
      
    	    imagedestroy($isrc);  
    	    imagedestroy($idest);  
     
    }  
    
    header("Content-type: image/jpeg");
    header("Cache-control: public");
    header("Expires: " . gmdate("D, d M Y H:i:s", date("U")+(86400*365.25)) . " GMT");
    
    img_resize($_GET['pathimage'], $dest, $_GET['width'], $_GET['height'], $rgb = 0xFFFFFF, $quality = 70);
    Ответ написан
    1 комментарий
  • Contact form 7 + Wordpress - как вывести своё окно благодарности?

    @IvanMogilev
    Backend developer: Wordpress,Yii
    У contact form 7 есть свои события, пример из Документации
    document.addEventListener( 'wpcf7submit', function( event ) {
      if ( '123' == event.detail.contactFormId ) {
        alert( "The contact form ID is 123." );
        // do something productive
      }
    }, false );

    вместо алерта можете попробовать показывать своё окно,и лучше использовать событие wpcf7mailsent
    Ответ написан
    Комментировать
  • Как добавить параметр для одной ссылки меню WordPress?

    mihdan
    @mihdan
    WordPress-евангелист, ведущий РНР - разработчик
    add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
    function wpse121123_contact_menu_atts( $atts, $item, $args ) {
      // ID айтема в меню
      $menu_target = 123;
    
      if ( $item->ID == $menu_target ) {
        $atts['rel'] = 'nofollow';
      }
      return $atts;
    }
    Ответ написан
    1 комментарий
  • Как заставить исполняться функцию, каждые 500px прокрутки страницы?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    var old = 0;
    window.addEventListener("scroll", function() {
      let now = Math.floor(window.pageYOffset / 500);
      if ( now > old ) {
        console.log("Очередные 500", now);
        old = now;
      }
    }, false);
    Ответ написан
    Комментировать