10 Полезных кодов для GeneratePress

 
  • ES
  • JA
  • PT
  • CN
  • FR
  • EN
  • Вот несколько полезных фрагментов кода. Это функции, фильтры и CSS, которые я использую или которые мне были необходимы в какой-то момент времени для шаблона GeneratePress которые я использую и я рекомендую. Некоторые из них вышли из вашего форум поддержкинеисчерпаемый источник решений, от его документация и другие от запросов поддержки и поиска.

    Показывайте дату и время обновления в сообщениях рядом с датой публикации

    Этот фильтр показывает дату и время обновления в записях GeneratePress. Это зависит от того, как Вы настроили дату в Настройки/Общие/Формат даты/Настроить. В используемом здесь случае это выглядит так: d/m/Y : H:i

    add_filter( 'generate_post_date_output', function( $output, $time_string ) {
        $time_string = '';
    
        if ( get_the_date() !== get_the_modified_date() ) {
            $time_string = ' | ';
        }
    
        $time_string = sprintf( $time_string,
            esc_attr( get_the_date( 'c' ) ),
            esc_html( get_the_date() ),
            esc_attr( get_the_modified_date( 'c' ) )),
            esc_html( get_the_modified_date() )
        );
    
        return sprintf( '%s ',
            $time_string
        );
    }, 10, 2 );

    Показывать только годы в виджете архива

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

    function my_limit_archives( $args ) {
        $args['type'] = 'yearly';
        return $args;
    }
    
    add_filter( 'widget_archives_args', 'my_limit_archives' );
    add_filter( 'widget_archives_dropdown_args', 'my_limit_archives' );
    10 Полезных кодов для GeneratePress

    Простое чтение прогресс-бара без плагина

    Существует несколько плагинов для добавления индикатора прогресса чтения в WordPress, а также аддоны для Elementor, но с помощью небольшого количества кода и фильтра Elements от GeneratePress его можно легко сделать гораздо более легким. Этот код взят из Сомнатх Саху

    *Для этого примера Вам необходимо использовать версию GeneratePress Premium .

    Сначала мы создаем фильтр с элементами с помощью этого кода.

    <div class="progress-container">
        <div class="progress-bar" id="myProgressBar"></div>
    </div>
    
    <script>
    window.onscroll = function() {myFunction()};
    function myFunction() {
      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById("myProgressBar").style.width = scrolled + "%";
    }
    </script>

    Мы установили его с помощью позиции wp_head и отобразили его в Posts / All Posts.

    10 Полезных кодов для GeneratePress
    Чтобы отобразить его, просто добавьте этот CSS в ваша дочерняя тема или в Customize/Additional CSS и стилизуйте его под свой блог.
    /* Полоса прогресса чтения */
    .progress-container {
      width: 100%;
      height: 8px;  
      background: #ccc; 
    }
    
    .progress-bar {
      height: 8px; 
      background: #a70404; 
      width: 0%;
      position:fixed;
      z-index:999;
    }

    И вот как отображается этот код после изменения цвета на зеленый

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

    10 Полезных кодов для GeneratePress

    Изменение логотипа только на определенной странице

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

    add_filter( 'generate_logo','tu_custom_about_logo' );
    функция tu_custom_about_logo( $logo )
    {
     	// Если, например, мы находимся на странице услуг, мы поместим наш пользовательский логотип для этой страницы
     	if ( is_page( 'services' ) )
     	 	return 'PUT LOGO URL HERE';
    
     	// И ЕСЛИ НЕТ, ПОМЕСТИТЕ ОБЩИЙ ЛОГОТИП
     	return $logo;
    
     }

    Скрыть сибебар в мобильной версии

    Если Вы относитесь к тем, кто все еще использует боковую панель и отказался от aMP-страницыесли Вы используете родную мобильную версию GeneratePress с боковой панелью, с помощью этого CSS Вы можете скрыть ее только для мобильной версии.

    В этом случае Вы можете добавить его в таблицу стилей в Вашей дочерней теме или из Custom/Additional CSS.

    Скрыть правую боковую панель

    @media(max-width: 768px) {
        #right-sidebar {
            display: none;
        }
    }
    

    Скрыть левую боковую панель

    @media(max-width: 768px) {
        #left-sidebar {
            display: none;
        }
    }

    Скрыть оба

    @media(max-width: 768px) {
        #right-sidebar, #left-sidebar {
            display: none;
        }
    }
    
    

    Отображать тематические изображения в контуре слева и справа

    Если Вы используете шаблон традиционный GeneratePress типа Marketer или аналогичный, с помощью этого кода Вы можете показывать главное изображение попеременно то слева, то справа в цикле

    .post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
        margin-left: 2em;
        float: right;
        text-align: right;
    }

    Я нашел этот код в aquigeneratepress.com где Вы можете найти другие полезные приемы. И вот результат

    10 Полезных кодов для GeneratePress

    Настройте кнопку «Читать далее»

    Как и выше, этот CSS предназначен для кнопки «Читать далее». Это тот, который я использую здесь, и размещает его справа под отрывком на первой странице.

    a.read-more {
    display: inline-block;
    color: white !important;
    padding: 10px;
    border-radius: 10px;
    float:right
    }

    Стилизация пагинации записей

    Фильтр и немного CSS для получения такого вида пагинации постов на главной странице. Отсюда Вы можете настраивать его по своему усмотрению.

    10 Полезных кодов для GeneratePress

    Первое, что нам нужно сделать, это заменить слова Previous и Next на символы << и >> с помощью этого фильтра, который Вы можете добавить в functions.php Вашей дочерней темы или с помощью Code Snippet.

    add_filter( 'generate_next_link_text', function() {
        return '>>';
    } );
    add_filter( 'generate_previous_link_text', function() {
        return '<<';
    } );

    А затем CSS, добавляемый таким же образом, как и в предыдущих случаях

    
    #nav-below {
        text-align: center;
    
    .paging-navigation .nav-links>* {
    	  font-size: 20px;
        padding: 7px 10px;
        background-color: #b50707;
        color: white;
        border-radius: 4px;
    }
    .paging-navigation .nav-links span.page-numbers.current {
        background: red;
        color: #ffffff;
    }
    a.next.page-numbers > span {
        display: none;
    }

    Центрирование окна браузера

    Родная поисковая система GeneratePress немного хромает, вот немного CSS для адаптации ее к устройствам и центрирования.

    /* Centrar caja de búsqueda en menú principal */
    form.search-form.navigation-search.nav-search-active {
        width:50%;
        left:50%;
        transform:translateX(-50%)
    }
    
     /* Responsive caja de búsqueda en móvil - tablet y PC */
    @media (max-width: 768px) {
        /* CSS para móvil */
            form.search-form.navigation-search.nav-search-active {
            width:100%;
            left:50%;
            transform:translateX(-50%)
        }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
        /* CSS para tablet */
        form.search-form.navigation-search.nav-search-active {
        width:100%;
        left:50%;
        transform:translateX(-50%)
        }
    
        .inside-navigation {
            align-items: flex-end !important;
            flex-direction:column-reverse;
        }
    }
    @media (min-width: 1025px) {
        /* CSS para PC */
            form.search-form.navigation-search.nav-search-active {
            width:40%;
            left:50%;
            transform:translateX(-50%)
        }
    }
    10 Полезных кодов для GeneratePress

    Размер текста категории и тега

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

    .entry-meta .cat-links a {
        padding: 3px 5px;
        font-size: 20px;
    }
    .entry-meta .tags-links a {
        padding: 3px 1px;
    	  font-size: 20px;
    
    }


    Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad