Astra

• Astra hooks
• Filters/Actions for Post (Gutenberg Blocks – Ultimate Addons for Gutenberg)
• How to add custom JavaScript code in Astra?
• Astra - Public Roadmap
• Astra Child Theme Generator
• Использование пользовательские шрифты с Astra
• Astra Theme APIs
• Functions

Плагины

• Gutenberg Blocks – Ultimate Addons for Gutenberg
• Lightweight Sidebar Manager
• Astra Widgets

Как отключить сайдбар на мобильных устройствах

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

Или можно использовать класс ast-header-break-point вместо медиазапроса. CSS будет отлично работать для разных точек останова.

.ast-header-break-point #secondary .sidebar-main{
    display: none;
}

Использование хуков

// Add scripts to astra_header_before()
add_action( 'astra_header_before', 'add_script_before_header' );
function add_script_before_header() {
    // Your PHP goes here
}

// Add content to astra_header_before()
add_action( 'astra_header_before', 'add_content_before_header' );
function add_content_before_header() { ?>
      <!-- Your HTML goes here -->
<?php }

// Add content to astra_header_after()
add_action( 'astra_header_after', 'add_content_after_header' );
function add_content_after_header() { ?>
      <!-- Your HTML goes here -->
<?php }

Источник

Пример с шорткодом:

// Add scripts to astra_header_before()
add_action( 'astra_single_header_bottom', 'add_script_before_header' );
function add_script_before_header() {
    echo do_shortcode( '[post-views]' );
}

Для одиночной записи:

// Add content to astra_entry_after()
add_action( 'astra_entry_after', 'add_content_entry_after' );
function add_content_entry_after() { 
	if ( is_single() ) {
	?>
       <!-- Your HTML goes here -->
        <?php }
}

How to remove Previous and Next link from a single blog post?

add_filter( 'astra_single_post_navigation_enabled', '__return_false' );

Изменить ссылку на логотипе

jQuery:

$(document).ready(function(){
$(".site-logo-img a").attr("href", "https://www.wpastra.com/");
});

Изменить ссылку "Read more" на странице блога

function modify_read_more_link() {
 return '<a class="more-link" href="' . get_permalink() . '">Continue...</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );

You can use this filter in the Astra child theme to change the Read More string for the blog

function astra_post_read_more() {
    return __( 'Continue Reading ....', 'astra' );
}
add_filter( 'astra_post_read_more', 'astra_post_read_more' );

удалить Read more:

function hide_read_more() {
    return false;
}
add_filter( 'astra_post_read_more', 'hide_read_more' );

Источник

Изменение тега для Tagline (по умолчанию <p>)

add_filter( 'astra_site_tagline_tag', 'astra_change_site_tagline_tag' );
 
/* Function to change tag of Site Tagline.
@param string $tag Default is p tag.
*/
function astra_change_site_tagline_tag( $tag ) {
$tag = 'h6';
return $tag;
}

Источник

Поменять тег h1 в названии сайта

add_filter( 'astra_site_title_tag', 'astra_change_site_title_tag' );

/* Function to change tag of Site Title.
 @param string $tag Default is h1 tag.
*/

function astra_change_site_title_tag( $tag ) {
    $tag = 'h2';
    return $tag;
}

Источник

Удалить ... над ссылкой "Читать дальше"

/*
 * Remove helip from read more link
*/
function remove_helip_from_read_more( $output, $output_filter ) {
	$output = str_replace( '…', '', $output );
	return $output;
}
add_filter( 'astra_post_link', 'remove_helip_from_read_more', 10, 2 );

Дата публикации записи

add_filter( 'astra_post_date_format', 'astra_add_time_with_date' );
/**
 * Filter function to add time in the published date of post.
 *
 * @param string $format default format is '' blank.
 * @return string
 */
function astra_add_time_with_date( $format ) {
    $format = 'F j, Y, g:i a';
    return $format;
}

Варианты:

• j.m.Y – 2.11.2015
• Y-j-m — 2015-2-11
• j M Y — 2 окт 2015
• j F Y — 2 октября 2015

Как отобразить «Последнее обновление» вместо «Дата публикации»

/**
 * Display only last modified date in the post metadata.
 *
 * @param String $output Markup for the last modified date.
 * @return void
 */
function your_prefix_post_date( $output ) {
	$output        = '';
	$format        = apply_filters( 'astra_post_date_format', '' );
	$modified_date = esc_html( get_the_modified_date( $format ) );
	$modified_on   = sprintf(
		esc_html( '%s' ),
		$modified_date
	);
	$output       .= '<span class="posted-on">';
	$output       .= '<span class="post-updated" itemprop="dateModified"> ' . $modified_on . '</span>';
	$output       .= '</span>';
	return $output;
}
add_filter( 'astra_post_date', 'your_prefix_post_date' );

Источник

Как увеличить или уменьшить выдержку из содержимого блога

add_filter( 'excerpt_length', function($length) {
    return 20;
} );

Для Astra Free. В Astra Pro есть эта функция.

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

@media screen and (max-width:640px){
    .footer-adv-widget {
    text-align: center;
}
}

CSS для выравнивания содержимого нижнего колонтитула по центру для мобильных и планшетных устройств

@media (max-width:768px){
    .footer-adv-widget {
    text-align: center;
}
}

Отображать только основную категорию

add_filter( 'the_category_list', function( $categories ) {
    if( ! empty( $categories ) && is_array($categories) ) {
        foreach ($categories as $key => $cat) {
            if( ! $cat->parent ) {
                $ob[] = $categories[$key];
                return $ob;
            }
        }
    }
    return $categories;
}, 100 );

Удалить поле URL из формы комментариев

function remove_comment_fields( $fields ) {
	unset( $fields['url'] );
	return $fields;
}
add_filter( 'comment_form_default_fields', 'remove_comment_fields', 60 );

Карусель постов (Gutenberg Blocks – Ultimate Addons for Gutenberg)

Если при использовании плагина Autoptimize некорректно отображается карусель постов (Gutenberg Blocks – Ultimate Addons for Gutenberg) нужно добавить в исключения папку wp-content\plugins\ultimate-addons-for-gutenberg\assets\js в Autoptimize.

Изменить ширину контента постов определённой категории

add_filter(
	'astra_get_option_site-content-width',
	function( $width ) {
		if ( has_category('block') ) {
			$width = 900;
		}

		return $width;
	}
);

Центрировать изображение поста

.post-thumb-img-content{

    text-align:center;
}

2 способа вставить Crelly Slider

Документация Crelly Slider

• If you are using Gutenberg add a “Shortcode” block where you want to display the slider. Paste the slider shortcode in the text field that will be displayed.
• The second method is using a php function. Write <?php if(function_exists(‘crellySlider’)) crellySlider(‘your_slider_alias’); ?>. Put the function wherever you want in a theme php file (e.g. index.php).

Вставить в Astra только на главной:

add_action( 'astra_header_after', 'add_content_header_after' );
function add_content_header_after() { 
    if ( is_front_page() ) {
    echo do_shortcode('[crellyslider alias="sl"]'); }
}

или:

// Add scripts to astra_header_after()
add_action( 'astra_header_after', 'add_script_after_header' );
function add_script_after_header() {
    if ( is_front_page() ) {
    if(function_exists('crellySlider')) crellySlider('sl'); }
}

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

@media screen and (max-width:640px){
    .crellyslider {
    display: none!important;
}
}

Скрыть различные элементы на мобильных устройствах

Сначала нужно элементу, который нужно скрыть, задать класс .hidden-on-mobile, затем:

@media (max-width: 480px) {
	.crellyslider .hidden-on-mobile { display: none !important; }
}

При скрытии слайдера можно поменять цвет названия сайта:

@media screen and (max-width:640px){
   .site-title a, .site-title a:focus, .site-title a:hover, .site-title a:visited {color:inherit!important;text-shadow: none;}
}

При этом кнопку меню гамбургер можно сделать чёрного цвета:

@media screen and (max-width:640px){
    .crellyslider {
    display: none!important;
}
   .ast-header-break-point .ast-mobile-menu-buttons-minimal.menu-toggle { 
    color:#000!important
}
}

При появления гамбургера можно сделать цвет этой кнопки белым и фон чёрным:

@media screen and (max-width:920px){
	.ast-theme-transparent-header .main-header-menu {}
        .ast-theme-transparent-header .main-header-menu {background-color:#000!important;}
	.ast-header-break-point .ast-mobile-menu-buttons-minimal.menu-toggle {color:#fff}
}

Эти стили можно прописать при включенной в настройках страницы "Прозрачной шапки".

Тень для Post Timeline Gutenberg Blocks – Ultimate Addons for Gutenberg

.uagb-timeline__events-new {box-shadow:0px 9px 40px 0px rgba(0,0,0,.5)}

Выцветание изображений записей на странице блога и для Post Timeline Gutenberg Blocks – Ultimate Addons for Gutenberg

.uagb-timeline__events-new img,.blog .post-thumb-img-content img{
opacity: 1;
    transition: opacity .25s ease-in-out;
}
.uagb-timeline__events-new img:hover,.blog .post-thumb-img-content img:hover{
    opacity: 0.8;
}

Post meta: Remove link to author page

To remove the author link from the frontend you can use the author_link filter. Please add the following code to your child theme’s function.php file.

function author_page_redirect( $link ) {
    $link = '';
    return $link;
}
add_action( 'author_link', 'author_page_redirect' );

And to remove the click functionality from the author link you can add the following CSS to your child theme’s style.css file.

.posted-by.author a {
     pointer-events: none;
}

Фон - изображение в подвале

.site-footer {
    color: #fff;
    background-image: url();
}
.footer-adv-overlay {
    background-color: rgba(023, 0, 0, 0.5);
	}

Дата публикации поста в бесплатной версии Astra

add_action( 'astra_single_header_after', 'add_script_single_header_after' );
function add_script_single_header_after() { ?>
      <p>Эта статья опубликована: <?php the_time('j F Y в H:i'); ?></p>
<?php }

Результат:

Эта статья опубликована: 2 ноября 2019 в 19:04

Можно убрать margin:

.single .entry-header {
    margin-bottom: 0;
}

Форматы даты и времени в WordPress

Дата под статьёй: wp-content/themes/astra-child/template-parts/content-single.php

<?php
/**
 * Template part for displaying single posts.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package Astra
 * @since 1.0.0
 */

?>

<?php astra_entry_before(); ?>

<article 
	<?php
		echo astra_attr(
			'article-single',
			array(
				'id'    => 'post-' . get_the_id(),
				'class' => join( ' ', get_post_class() ),
			)
		);
		?>
>

	<?php astra_entry_top(); ?>

	<?php astra_entry_content_single(); ?>
    Эта статья опубликована: <?php the_time('j F Y в H:i') ?>
	<?php astra_entry_bottom(); ?>

</article><!-- #post-## -->

<?php astra_entry_after(); ?>

или:

add_action( 'astra_entry_content_after', 'add_script_astra_entry_content_after' );
function add_script_astra_entry_content_after() {
if ( is_single() ) {
?>
      <p>Эта статья опубликована: <?php the_time('j F Y в H:i'); ?></p>
<?php }
}

Сброс отступа между контентом и датой

Если нет буквицы:

.entry-content p {
    margin-bottom: 0;
}

Если есть буквица:

.entry-content p {
    margin-bottom: 0;
}
.has-drop-cap:not(:focus):after {
    padding-top: 0;
}

Дата публикация + метки

add_action( 'astra_entry_content_after', 'add_script_astra_entry_content_after' );
function add_script_astra_entry_content_after() {
if ( is_single() ) {
   
if (get_the_tag_list()) { // есть ли вообще тэги
	the_tags( 'Метки: ', ' | ');
}
?>
    <p class="datapost">Эта статья опубликована: <?php the_time('j F Y в H:i'); ?></p>
<?php }
}

Кеширование

1. Autoptimize + Simple Cache (или Cache Enabler)
2. Fast Velocity Minify + Cache Enabler (или W3 Total Cache)
3. Autoptimize + WP-Optimize

Font size of the menu

.main-header-bar-wrap .main-navigation ul a{
    font-size:19px;
}

Изменить направление для открытия подменю

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

ast-left-align-sub-menu

Button visually impaired

Добавить: Настройки → Шапка → Основное меню → Последний элемент в меню - Текст / HTML → Добавить шорткод [bvi text="Версия для слабовидящих"]

Выровнять иконку по вертикали:

.bvi-icon {
    vertical-align: middle;
}

Похожие статьи

// Related Posts
// Add scripts to astra_entry_after()
add_action( 'astra_entry_after', 'add_script_entry_after' );
function add_script_entry_after() {
	if ( is_single() ) {
	$orig_post = $post;
	global $post;
	$categories = get_the_category($post->ID);
	if ($categories) {
		$category_ids = array();
		foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

	$args=array(
		'category__in' => $category_ids,
		'post__not_in' => array($post->ID),
		'posts_per_page'=> 10, // Number of related posts that will be shown.
		'caller_get_posts'=>1,
		'orderby' => 'rand'
	);

	$my_query = new wp_query( $args );
	if( $my_query->have_posts() ) {
		echo '<div id="related_posts" class="ast-article-single"><h3>Читайте также</h3><ul>';
		while( $my_query->have_posts() ) {
			$my_query->the_post();?>
			<li><a href="<? the_permalink()?>" rel="bookmark"><?php the_title(); ?></a></li>
				<?
			}
			echo '</ul></div>';
		}
	}
	$post = $orig_post;
	wp_reset_query();
	
	}
}

Или:

// Add scripts to astra_comments_before()
add_action( 'astra_comments_before', 'add_script_comments_before' );
function add_script_comments_before() {
if ( is_single() ) {
$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
	$category_ids = array();
	foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

	$args=array(
		'category__in' => $category_ids,
		'post__not_in' => array($post->ID),
		'posts_per_page'=> 10, // Number of related posts that will be shown.
		'caller_get_posts'=>1,
		'orderby' => 'rand'
	);

	$my_query = new wp_query( $args );
	if( $my_query->have_posts() ) {
		echo '<div id="related_posts" class="ast-article-single"><h3>Читайте также</h3><ul>';
		while( $my_query->have_posts() ) {
			$my_query->the_post();?>
			<li><a href="<? the_permalink()?>" rel="bookmark"><?php the_title(); ?></a></li>
				<?
			}
			echo '</ul></div>';
		}
	}
	$post = $orig_post;
	wp_reset_query();
	
	}
}

C разделителем:

// Related Posts
// Add scripts to astra_entry_after()
add_action( 'astra_entry_after', 'add_script_entry_after' );
function add_script_entry_after() {
	if ( is_single() ) { ?>
		<div class="post-item-divider">Post Divider</div>
		<?php
		$orig_post = $post;
		global $post;
		$categories = get_the_category($post->ID);
		if ($categories) {
			$category_ids = array();
			foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

			$args=array(
				'category__in' => $category_ids,
		        'post__not_in' => array($post->ID),
				'posts_per_page'=> 10, // Number of related posts that will be shown.
				'caller_get_posts'=>1,
				'orderby' => 'rand'
			);
			$my_query = new wp_query( $args );
			if( $my_query->have_posts() ) {
				echo '<div id="related_posts" class="ast-article-single"><h3>Читайте также</h3><ul>';
				while( $my_query->have_posts() ) {
					$my_query->the_post();?>
					<li><a href="<? the_permalink()?>" rel="bookmark"><?php the_title(); ?></a></li>
					<?
				}
				echo '</ul></div>';
			}
		}
		$post = $orig_post;
		wp_reset_query();
	}
}

Вставить код на странице блога

// Add content to astra_entry_after()
add_action( 'astra_entry_after', 'add_content_entry_after' );
function add_content_entry_after() {
global $wp_query;
if($wp_query->query['pagename']=='blog'){
?>
      <!-- Your HTML goes here -->
<?php}  
}

Разделитель между постами:

// Add content to astra_entry_after()
add_action( 'astra_entry_after', 'add_content_entry_after' );
function add_content_entry_after() {
global $wp_query;
if($wp_query->query['pagename']=='blog'){
if (($wp_query->current_post + 1) < ($wp_query->post_count)) {
   echo '<div class="post-item-divider">Post Divider</div>';
}  
}
}

Или в content-blog.php

<?php
/**
 * Template part for displaying posts.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package Astra
 * @since 1.0.0
 */

?>

<?php astra_entry_before(); ?>

<article itemtype="https://schema.org/CreativeWork" itemscope="itemscope" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<?php astra_entry_top(); ?>

	<?php astra_entry_content_blog(); ?>

	<?php astra_entry_bottom(); ?>

</article><!-- #post-## -->

<?php astra_entry_after(); ?>
<?php
if (($wp_query->current_post + 1) < ($wp_query->post_count)) {
   echo '<div class="post-item-divider">Post Divider</div>';
}
?>

Скрыть виджет "Свежие записи" в футере на странице блога, записей и архивов на мобильных устройствах

/*Скрыть виджет "Свежие записи" в футере на мобильных устройствах*/
@media (max-width:768px){
	.blog .site-footer .widget_recent_entries,
	.single .site-footer .widget_recent_entries,
	.archive .site-footer .widget_recent_entries{display:none;}
	.single.ast-no-sidebar .site-footer .widget_recent_entries{display:block;}
}

или:

/*Скрыть виджет "Свежие записи" в футере на мобильных устройствах*/
@media (max-width:768px){
	.blog .site-footer .widget_recent_entries,
	.single.ast-right-sidebar .site-footer .widget_recent_entries,
	.archive.ast-right-sidebar .site-footer .widget_recent_entries{display:none;}
}

transparent header still has 4em margin

When you use a boxed or content-boxed layout for the container, Astra applies a margin of 4em to top and bottom. You can remove top margin with following CSS

#primary {
margin-top:0;
}

Скрыть Post Grid на мобильных (Gutenberg Blocks – Ultimate Addons for Gutenberg)

Yes, indeed you can do that. You need to add a custom class from Advanced tab in Post Grid and add the below-given CSS in theme’s custom CSS:

@media (max-width: 767px) {
    .uagb-post-grid.my-custom-class {
        display: none;
    }
}

Источник

Disable the Loading of Astra’s Default Font File? (Astra.woff)

Отключить Astra.woff:

add_filter( 'astra_enable_default_fonts', '__return_false' );

Источник. Но этот шрифт используется для иконок мобильного меню. Если подключен Font Awesome, то можно использовать его. Для Font Awesome 5 Free:

.ast-button-wrap .menu-toggle .menu-toggle-icon::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900;
    content:"\f0c9";
	}
.ast-button-wrap .menu-toggle.toggled .menu-toggle-icon::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    content:"\f0c9";
}

Для Font Awesome 4:

.ast-button-wrap .menu-toggle .menu-toggle-icon::before {
	font-family: "FontAwesome";
    content:"\f0c9";
	}
.ast-button-wrap .menu-toggle.toggled .menu-toggle-icon::before {
    font-family: "FontAwesome";
    content:"\f00d";
}

Источник.

Preload fonts

В приведенном ниже коде мы отключаем шрифты по умолчанию и предварительно загружаем шрифты Astra с помощью действия wp_head:

add_filter( 'astra_enable_default_fonts', 'temp_disable_astra_fonts' );
function temp_disable_astra_fonts( $load ) {
  $load = false;
  return $load;
}
add_action( 'wp_head', 'add_astra_fonts_preload', 1 );
function add_astra_fonts_preload() {
  ?>
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.woff" as="font" crossorigin />
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.ttf" as="font" crossorigin />
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.svg#astra" as="font" crossorigin />
  <style type='text/css'>
  <?php
  echo '@font-face {font-family: "Astra";src: url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.woff) format("woff"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.ttf) format("truetype"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.svg#astra) format("svg");font-weight: normal;font-style: normal;font-display: fallback;}';
  ?>
  </style>
  <?php
}

Источник 1 И сточник 2

Custom Post Type Файлы blog.php иsingle-blog.php

Разбить пост на страницы

Раньше:

<!--nextpage-->

В Гутенберге вставить блок "Разрыв страницы" (Page Break).

How to Change Previous and Next Link Text from a Single Blog Post?

The following filter will fetch the Previous and Next post title and will display them as navigation links.

add_filter( 'astra_single_post_navigation', 'astra_change_next_prev_text' );

/**
 * Function to change the Next Post/ Previous post text.
 *
 * @param array $args Arguments for next post / previous post links.
 * @return array
 */
function astra_change_next_prev_text( $args ) {
	$next_post = get_next_post();
	$prev_post = get_previous_post();
	$next_text = false;
	if ( $next_post ) {
		$next_text = sprintf(
			'%s <span class="ast-right-arrow">→</span>',
			$next_post->post_title
		);
	}
	$prev_text = false;
	if ( $prev_post ) {
		$prev_text = sprintf(
			'<span class="ast-left-arrow">←</span> %s',
			$prev_post->post_title
		);
	}
	$args['next_text'] = $next_text;
	$args['prev_text'] = $prev_text;
	return $args;
}

The following filter will replace Previous and Next links with your custom text. You can replace your text with – ‘My Previous Custom Text’ and ‘My Next Custom Text’ in the following filter code.

add_filter( 'astra_single_post_navigation', 'astra_change_next_prev_text' );
 
/**
 * Function to change the Next Post/ Previous post text.
 *
 * @param array $args Arguments for next post / previous post links.
 * @return array
 */
function astra_change_next_prev_text( $args ) {
    $next_post = get_next_post();
    $prev_post = get_previous_post();
    $next_text = false;
    if ( $next_post ) {
        $next_text = sprintf(
            '%s <span class="ast-right-arrow">→</span>',
            'My Next Custom Text'
        );
    }
    $prev_text = false;
    if ( $prev_post ) {
        $prev_text = sprintf(
            '<span class="ast-left-arrow">←</span> %s',
            'My Previous Custom Text'
        );
    }
    $args['next_text'] = $next_text;
    $args['prev_text'] = $prev_text;
    return $args;
}

Источник

Размер bottom-footer bar

.ast-footer-overlay{
    padding-top: 1em;
    padding-bottom: 1em;
}

Table of Contents no background – Ultimate Addons for Gutenberg

.wp-block-uagb-table-of-contents div.uagb-toc__wrap {
	background: transparent;
}

Для оформления первых букв названия сайта (site-title) с помощью ::first-letter нужно span заменить на h1. Для это можно применить фильтр:

add_filter( 'astra_site_title_tag', 'astra_change_site_title_tag' );

/* Function to change tag of Site Title.
 @param string $tag Default is span tag.
*/

function astra_change_site_title_tag( $tag ) {
    $tag = 'h1';
    return $tag;
}

Пример CSS:

.site-title {
    font-family: 'Overlock Black';
    font-size: 2.4em;
    font-weight: 900;
    font-variant: small-caps;
    margin: 0;
}

.site-title::first-letter {
    font-family: 'Overlock Black';
    color: rgb(182,22,51);
    font-weight: 900;
    font-size: 130%;
    margin-right: 0.01em;
    text-shadow: 1px 1px 0 rgb(242,242,255),2px 1px 0 rgb(37,38,42);
    vertical-align: -0.1em;
}
/*Описание сайта*/
.site-description {
    font-family: 'Overlock Bold';
    font-size: 110%;
    font-weight: 700;
    margin: -0.6em 1.4em;
}

background of the drop-down menu

.ast-header-break-point .main-navigation .main-header-menu {
    background-color: grey;
}

Вывод статей в 2 колонки

add_filter('post_class','category_two_column_classes');
function category_two_column_classes( $classes ) {
global $wp_query;
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
return $classes;
}

.two-column-post { width: 47%; float: left; box-shadow: 0 2px 4px rgba(0, 0, 0, .25);}
.two-column-post-left { clear: left; margin-left: 0; }

.two-column-post .entry-content {padding: 0 15px 15px;}
.two-column-post .entry-header {padding:0 15px;}

.ast-separate-container .two-column-post {padding:5px;margin: 3px;}

@media (max-width: 768px) {
     .two-column-post {
         width: 100%;float:none;
     }
     .ast-separate-container .two-column-post  {padding:inherit;margin: inherit;}
 }

В две колонки для раздела Категории:

add_filter('post_class','category_three_column_classes');
function category_three_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'three-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'column-post-left';
endif;
return $classes;
}

В две колонки только на странице блога

add_filter('post_class','category_two_column_classes');
function category_two_column_classes( $classes ) {
global $wp_query;
if($wp_query->query['pagename']=='blog') :
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
return $classes;
endif;
}

или:

add_filter('post_class','category_two_column_classes');
function category_two_column_classes( $classes ) {
global $wp_query;
if($wp_query->query['pagename']=='blog'){
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
return $classes;
}
}

В три колонки

add_filter('post_class','category_three_column_classes');
function category_three_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'three-column-post';
if( $wp_query->current_post%3 == 0 ) $classes[] = 'column-post-left';
endif;
return $classes;
}

на главной, категории, а лучше ещё и в поиске:

if( is_category() || is_home() || is_search() ) :

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

function new_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'new_excerpt_length');

или:

add_filter( 'excerpt_length', function($length) {
    return 20;
} );

http://wordsmall.ru/bez-plagina/vyvodim-posty-v-dve-kolonki-na-wordpress.html

Gutenberg Blocks – Ultimate Addons for Gutenber. Post grid - исключить текущую запись

function filter_post_query( $query_args, $attributes) {
    // Modify $query_args values.
    $query_args['post__not_in'] = get_the_ID();
    return $query_args;
} 
add_filter( 'uagb_post_query_args_grid', 'filter_post_query', 10, 2 );

Speed/Transition Speed values – Ultimate Addons for Gutenberg

add_filter( 'uagb_testimonials_slick_options', function( $attr, $id ) {
	$attr['autoplaySpeed'] = 20000; // Autoplay Speed.
	$attr['speed'] = 7000; // Transition Speed.

	return $attr;
}, 10, 2 );

How to remove excerpt

add_filter( 'the_excerpt', 'filter_the_excerpt', 10, 2 );
    function filter_the_excerpt( ) {
    return ' ';
 }

Добавить точки

add_filter('excerpt_more', 'my_func');
function my_func($more) {
	return '...';
}

или

add_filter('excerpt_more', function($more) {
	return '...';
});

Ссылка "Читать полностью" всегда

wp-content/themes/astra/inc/blog/blog-config.php (строка 186)

function new_excerpt_more($more) {
    return '';
}
add_filter('excerpt_more', 'new_excerpt_more', 21 );

function the_excerpt_more_link( $excerpt ){
    $read_more_text    = apply_filters( 'astra_post_read_more', __( 'Read More »', 'astra' ) );
    $excerpt .= '<p class="read-more"><a class="my-read-more" href="'. get_permalink( get_the_ID() ) . '">' . $read_more_text . '</a></p>';
    return $excerpt;
}
add_filter( 'the_excerpt', 'the_excerpt_more_link', 21 );

function new_excerpt_more($more) {
    return '';
}
add_filter('excerpt_more', 'new_excerpt_more', 21 );

function the_excerpt_more_link( $excerpt ){
    $read_more_text    = apply_filters( 'astra_post_read_more', __( 'Read More »', 'astra' ) );
    $read_more_classes = apply_filters( 'astra_post_read_more_class', array() );

		$post_link = sprintf(
			esc_html( '%s' ),
			'<a class="' . esc_attr( implode( ' ', $read_more_classes ) ) . '" href="' . esc_url( get_permalink() ) . '"> ' . the_title( '<span class="screen-reader-text">', '</span>', false ) . ' ' . $read_more_text . '</a>'
		);
    $excerpt .= '<p class="read-more"> ' . $post_link . '</p>';
    return $excerpt;
}
add_filter( 'the_excerpt', 'the_excerpt_more_link', 21 );

.blog .entry-content p:first-child:after {content: " ..."}

add_filter('excerpt_more', 'my_func');
function my_func($more) {
	return '...';
}
function the_excerpt_more_link( $excerpt ){
    $read_more_text    = apply_filters( 'astra_post_read_more', __( 'Read More »', 'astra' ) );
    $read_more_classes = apply_filters( 'astra_post_read_more_class', array() );

		$post_link = sprintf(
			esc_html( '%s' ),
			'<a class="' . esc_attr( implode( ' ', $read_more_classes ) ) . '" href="' . esc_url( get_permalink() ) . '"> ' . the_title( '<span class="screen-reader-text">', '</span>', false ) . ' ' . $read_more_text . '</a>'
		);
    $excerpt .= '<p class="read-more"> ' . $post_link . '</p>';
    return $excerpt;
}
add_filter( 'the_excerpt', 'the_excerpt_more_link', 21 );

мой вариант:

add_filter('excerpt_more', 'my_func');
function my_func($more) {
	return '...';
}
function the_excerpt_more_link( $excerpt ){
    $read_more_text    = apply_filters( 'astra_post_read_more', __( 'Read More »', 'astra' ) );
    $read_more_classes = apply_filters( 'astra_post_read_more_class', array() );

		$post_link = '<a class="class-name" href="' . esc_url( get_permalink() ) . '"> ' . the_title( '<span class="screen-reader-text">', '</span>', false ) . ' ' . $read_more_text . '</a>'
		;
    $excerpt .= '<p class="read-more"> ' . $post_link . '</p>';
    return $excerpt;
}
add_filter( 'the_excerpt', 'the_excerpt_more_link', 21 );

Remove the author link in from the archive page meta. Can paste the code in functions.php of child theme

function astra_post_author( $output_filter = '' ) {

	ob_start();

	echo '<span ';
		echo astra_attr(
			'post-meta-author',
			array(
				'class' => 'posted-by vcard author',
			)
		);
	echo '>';
		// Translators: Author Name. ?>
		<a title="<?php printf( esc_attr__( 'View all posts by %1$s', 'astra' ), get_the_author() ); ?>" 
			href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author"
			<?php
				echo astra_attr(
					'author-url',
					array(
						'class' => 'url fn n',
					)
				);
			?>
			>
			<span
			<?php
				echo astra_attr(
					'author-name',
					array(
						'class' => 'author-name',
					)
				);
			?>
			><?php echo get_the_author(); ?></span>
		</a>
	</span>

	<?php

	$output = ob_get_clean();

	return apply_filters( 'astra_post_author', $output, $output_filter );
}

Источник

Header - тесёмкой

.main-header-bar:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 20px;
	left: 0;
	bottom: -20px;
	background: radial-gradient(white 0%, white 70%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%) 0 -10px;
	background-size: 20px 20px;
	background-repeat: repeat-x;
}

Добавить класс к тегу a в Read More

add_filter( 'astra_post_read_more_class','my_rm_classes' );
function my_rm_classes( $classes ) {
 
    $classes[] = 'my-read-more';
     
    return $classes;
     
}

или:

// Add specific CSS class by filter.
 
add_filter( 'astra_post_read_more_class', function( $classes ) {
    return array_merge( $classes, array( 'class-name' ) );
} );

Уведомление на странице

// [mobileonly] shortcode
add_shortcode('mobileonly', 'wp_snippet_mobile_only_shortcode');
function wp_snippet_mobile_only_shortcode($atts, $content = null){ 
    if( wp_is_mobile() ){ 
        return  '<p style="background: none repeat scroll 0 0 #ff9; clear: both; margin-bottom: 18px; overflow: hidden; border: 1px solid #e5e597; padding: 13px;">' . do_shortcode($content) . '</p>'; 
    } else {
        return null; 
    } 
}

[mobileonly]На этой странице имеется содержимое, которое не может быть отображено на мобильных устройствах[/mobileonly]

Move the comment form to the top before the comment list

Here are the steps you can
Step 1: Create a comments.php file in the child theme
Step 2: Then copy the contents from the comments.php of Astra and paste it in the comments.php file of child theme.
Step 3: Move the code <?php comment_form() ?> from line 95 to below line number 61.

Источник

Сохранить формат HTML в выдержке Post Grid и Post Masonry – Ultimate Addons for Gutenberg

Если вы хотите сохранить формат HTML в выдержке из Post Masonry , то вы можете использовать следующий фильтр:

add_filter('uagb_single_post_excerpt_masonry', function($excerpt, $id, $attr) {
	return get_the_content();
},10, 3 );

Если вы хотите сохранить формат HTML в выдержке для Post Grid , вы можете использовать следующий фильтр:

add_filter('uagb_single_post_excerpt_grid', function($excerpt, $id, $attr) {
	return get_the_content();
},10, 3 );

Источник

Сайдбар с тенью

.sidebar-main {
    box-shadow: 0 0px 10px 0px rgba(0,0,0,.31) !important;
}

.ast-separate-container.ast-two-container #secondary .widget {
    margin-bottom: 0;
}


.widget-title {
    color: #fff;
    background: #ef5323;
    font-weight: 700;
    padding: 10px;
    text-align: center;
}

Пример

Изменить размер шрифта отрывков

.entry-content.clear p:not(.read-more) {
    font-size: 17px;
}

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

Footer Custom Text Helper Strings

[current_year] -> This String prints Current Year.

[site_title] -> This String prints Current Site Title.

[theme_author] -> This String prints Theme name with It’s author link.

Примеры:

HTML in Custom Text:
Copyright © [current_year] [site_title] | Powered by [theme_author]

On Front-end:
Copyright © 2017 Your Site Title | Powered by Astra

Изменить цвет ссылок только для ПК

@media ( min-width:768px) { 
    .main-header-menu a {
        color: #ffffff;
    }
}

Next previous within a category

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

add_filter('astra_single_post_navigation' , 'relevant_post_pagination' );

function relevant_post_pagination() {
    return array(
        'next_text' => $next_text,
        'prev_text' => $prev_text,
        'in_same_term' => true,
   );
}

Источник

Оформление ссылок в меню (активный пункт)

/* Blog Navigation */
.blog-navigation {
        list-style-type: none;
		text-align: left;
		display: inline;
		margin: 0px;
    }
.blog-navigation a:link {
        display: inline-block;
        padding: 10px;
        color: #0A1214;
        font-family: Open Sans, sans-serif;
        text-decoration: none;
        font-weight: 400;
    }
.blog-navigation a:visited {
		display: inline-block;
		color: #0a1214;
}
.blog-navigation.current-menu-item {
		display: inline-block;
		background-image: linear-gradient(#24DCCC, #24DCCC);
        background-repeat: no-repeat;
        background-size: 90% 15%;
  		background-position: 50% 65%;
		color: #0a1214;
}
.blog-navigation a:hover {
        display: inline-block;
        background-image: linear-gradient(#24DCCC, #24DCCC);
  		background-repeat: no-repeat;
  		background-size: 90% 15%;
  		background-position: 50% 65%;
		transition: background-position;
    }

/* Hide arrow in main Menu */
.main-header-bar-navigation .sub-arrow{
    display:none;
}

/* underline Main Menu */
@media (min-width: 768px) {
.underline-magical.current-menu-item {
  background-image: linear-gradient(#24DCCC, #24DCCC);
  background-repeat: no-repeat;
  background-size: 70% 10%;
  background-position: 50% 60%;
}
}

@media (min-width: 768px) {
.underline-magical:hover {
  background-image: linear-gradient(#24DCCC, #24DCCC);
  background-repeat: no-repeat;
  background-size: 70% 10%;
  background-position: 50% 60%;
}
}

/* Padding Sub Menu */
@media (min-width: 768px) {
.padding-arrow .current-menu-item {
		display: inline-block;
		background-image: linear-gradient(#24DCCC, #24DCCC);
        background-repeat: no-repeat;
        background-size: 85% 10%;
  		background-position: 50% 63.5%;
}
}

@media (min-width: 768px) {
.padding-arrow:hover {
  background-image: linear-gradient(#24DCCC, #24DCCC);
  background-repeat: no-repeat;
  background-size: 70% 10%;
  background-position: 50% 60%;
}
}

Источник

Цвет Мобильного меню

@media (max-width: 600px) {
  .menu-selectors {
    color: lightblue;
  }
}

Подменю - цвет фона

As on the homepage, you are using a Transparent Header whose Submenu CSS has higher weight so it applies a white background. To overwrite the same, you can use the following CSS:

.main-header-menu .sub-menu li.menu-item {
     background-color: #999;
}

Источник

Reducing footer spacing

.footer-adv .footer-adv-overlay {
    padding-top: 35px;
    padding-bottom: 35px;
}

increasing space between the 2 icons

.footer-adv-overlay .textwidget a {
    padding-right: 15px;
}

Change background color of the header in astra theme free

.site-header .main-header-bar {
    background: rgba(207, 222, 255, 0.48);
}

Reduce vertical spacings in the footer area

.ast-small-footer .ast-footer-overlay {
    padding-top: 1em;
    padding-bottom: 1em;
}

.ast-small-footer-section.ast-small-footer-section-2 {
    margin-top: 0.5em;
}

Table Of Contents + digit + shadow - Ultimate Addons for Gutenberg

1] CSS for adding digit in the content:

.uagb-toc__list-wrap ul.uagb-toc__list {
 list-style-type: decimal;
}

2] CSS for adding box-shadow to the Table of Content:

.uagb-toc__wrap {
  box-shadow: 4px 4px 5px 2px #544949;
}

Note: In the above CSS of box-shadow, the 5 values indicate h-offset, v-offset, blur, spread, and color. You can change it as per your requirement.

Post Grid: Sort posts/page by modified (Gutenberg Blocks – Ultimate Addons for Gutenberg)

With the Post Grid block, is it possible to be able to sort posts by when they were modified last?

You can use the offset parameter in the wp_query function to sort posts by when they were modified last. First, you have to use a custom class for your block. Then, add the following filter in the functions.php file of your child theme:

function filter_post_query( $query_args, $attributes) {
    if ( 'my-post-grid-class' == $attributes['className'] ) {
        $query_args['order'] = 'DESC';
        $query_args['orderby'] = 'modified';
    }
    return $query_args;
}
add_filter( 'uagb_post_query_args_grid', 'filter_post_query', 10, 2 );

Please note, in the following line my-post-grid-class is nothing but a unique class you have added from the Advanced Tab for the Post Grid.

Источник

Удалить «Архив» из заголовка

add_filter( 'get_the_archive_title', 'to_archive_title_remove_prefix' );
function to_archive_title_remove_prefix( $title ) {
    if ( is_post_type_archive() ) {
        $title = post_type_archive_title( '', false );
    }
return $title;
}

Источник

Добавить аватар перед именем пользователя в блоге

if ( ! function_exists( 'astra_post_author' ) ) {
 
    /**
     * Function to get Author of Post
     *
     * @param  string $output_filter Filter string.
     * @return html                Markup.
     */
    function astra_post_author( $output_filter = '' ) {
 
        ob_start();
 
        echo '<span ';
            echo astra_attr(
                'post-meta-author',
                array(
                    'class'     => 'posted-by vcard author',
                    'itemtype'  => 'https://schema.org/Person',
                    'itemscope' => 'itemscope',
                    'itemprop'  => 'author',
                )
            );
        echo '>';
            // Translators: Author Name. ?>
            <a class="url fn n" title="<?php printf( esc_attr__( 'View all posts by %1$s', 'astra' ), get_the_author() ); ?>" 
                href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author" itemprop="url">
                <span class="author-avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ), 35 ); ?></span>
                <span class="author-name" itemprop="name"><?php echo get_the_author(); ?></span>
            </a>
        </span>
 
        <?php
 
        $output = ob_get_clean();
 
        return apply_filters( 'astra_post_author', $output, $output_filter );
    }
}
 
add_filter( 'astra_default_strings', 'wpd_astra_default_strings' );
function wpd_astra_default_strings( $strings ) {
    $strings['string-blog-meta-author-by'] = ''; // removing "by" text
    
    return $strings;
}

Источник

Показывать рекламу между постами на странице блога

add_action( 'astra_entry_before', 'wpd_astra_entry_after' );
function wpd_astra_entry_after() {
	
	if( is_home() ) {
		global $wp_query;

		if( $wp_query->current_post == 3 || $wp_query->current_post == 7 ) {
			echo '<div class="ads">
					ENTER YOUR ADS SCRIPT HERE
				  </div>';
		}
	}
}

Приведенный выше код будет выполнять и отображать рекламу после 3-го и 7-го поста. Вы можете изменить 3 и 7 в коде для определенного местоположения объявления согласно требованию. Кроме того, замените «Введите здесь свой рекламный скрипт» фактическим рекламным кодом или содержанием, которое вы хотите отобразить.

Для сообщений на страницах архива и категории

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

add_action( 'astra_entry_before', 'wpd_astra_entry_after' );
function wpd_astra_entry_after() {
    
    if( is_home() || is_archive() || is_category() ) {
        global $wp_query;
 
        if( $wp_query->current_post == 3 || $wp_query->current_post == 7 ) {
            echo '<div class="ads">
                    ENTER YOUR ADS SCRIPTS HERE
                  </div>';
        }
    }
}

В приведенном выше коде есть две новые условные логики is_archive () и is_category () в операторе IF для выполнения этого на страницах архива и категории.

Источник

Add H1 tag to website Logo on Homepage of Astra theme

Хотите добавить тег H1 к логотипу сайта в теме Astra по причинам SEO? В то время как внутренние страницы имеют заголовок страницы как тег H1, вы можете захотеть обернуть логотип тегом H1 для домашней страницы только при использовании темы Astra. Это может быть достигнуто с помощью пользовательского кода:

add_filter( 'astra_logo', 'wpd_astra_logo_wrap_h1' );
function wpd_astra_logo_wrap_h1( $html ) {
    if( has_custom_logo() && ( is_home() || is_front_page() ) ) {
        $html = str_replace( '<span ', '<h1 ', $html );
        $html = str_replace( '</span>', '</h1>', $html );
    }
    
    return $html;
}

Источник

Удалить текст описания из архивных страниц категорий в теме Astra

add_filter( 'get_the_archive_description', '__return_null');

Источник

Show Description Text under every Menu Item in Astra Theme

На странице Меню в настройках экрана отметить чекбокс Описание. Добавить описание к нужным пунктам меню.

functions.php

/**
 * Displaying the description below the menu item
 */
function wpd_astra_nav_menu_items_description( $output, $item, $depth, $args ) {
 
    if ( ! empty( $item->description ) ) {
        $output = str_replace( $args->link_after . '</a>', '<span class="menu-item-description">' . $item->description . '</span>' . $args->link_after . '</a>', $output );
    }
 
    return $output;
}
add_filter( 'walker_nav_menu_start_el', 'wpd_astra_nav_menu_items_description', 90, 4 );

CSS

@media only screen and (min-width: 922px) {
	.main-header-menu > .menu-item > a {
		height: auto;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		text-align: center;
		justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
		line-height: 1.5;
	}

	.menu-item-description {
		color: #777;
		clear: both;
		font-size: 12px;
		flex: 0 0 100%;
	}
}

@media only screen and (max-width: 921px) {
	.menu-item-description {
		display: none;
	}
}

Источник

Change ‘Leave a comment’ title H3 to H4 tag in Astra Theme

add_filter( 'astra_comment_form_default_markup', function( $args ) {
    $args['title_reply_before'] = '<h4 id="reply-title" class="comment-reply-title">';
    $args['title_reply_after'] = '</h4>';
    
    return $args;
});

Источник