Chủ đề Astra - Tipps và Thủ thuật

Bài viết này là tập hợp các đoạn mã, mẹo và thủ thuật cho Chủ đề Astra mạnh mẽ.

Bồi thường các neo tiêu đề cố định

Nếu bạn sử dụng mục lục hoặc các dấu nhảy nội bộ khác và đồng thời là tiêu đề cố định của Chủ đề Astra, thì nội dung sẽ được bao phủ bởi chiều cao của tiêu đề cố định. Mã CSS này giải quyết vấn đề.

/* Fixed header fix */
:target:before {
	content: "";
	display: block;
	height: 65px; /* same as your fixed header height */
	margin: -65px 0 0; /* negative fixed header height */
}

Thay đổi thẻ tiêu đề tiêu đề tiện ích con H2

Chủ đề Astra tuyệt vời cũng xử lý các tiêu đề không chính xác. Không may!
Theo mặc định, Thẻ tiêu đề H2 được chỉ định. Rõ ràng điều này được tiếp quản từ một chủ đề mặc định của WordPress. Nhưng tôi không muốn điều đó, bởi vì tiêu đề H2 là dấu mốc rất quan trọng trong nội dung của bài đăng.

Chúng tôi thực hiện thay đổi chủ đề Astra Child của chúng tôi. Nếu bạn không chắc chắn nên đặt nó ở đâu, hãy thêm nó vào cuối:functions.php

// Change Sidebar Widget Title Heading Tag
add_filter( 'astra_widgets_init', 'j0e_widget_title_tag', 10, 1 );
function j0e_widget_title_tag( $atts ) {
  $atts['before_title'] = '<div class="widget-title">';
  $atts['after_title'] = '</div>';
return $atts;
}

Nhiều người gán H4 cho các tiêu đề widget. Nhưng tôi sử dụng một div -container. Về mặt quang học, mọi thứ vẫn giống nhau, vì lớp CSS được sử dụng.class="widget-title"

Thật không may, bộ lọc không hoạt động với các tiện ích con Astra-Footer. Nhưng bộ phận hỗ trợ nói với tôi rằng họ cũng muốn mở rộng bộ lọc cho các tiện ích Footer.

Như một giải pháp thay thế cho các widget HTML, bạn có thể viết tiêu đề trực tiếp vào vùng nội dung:

<div class="widget-title">Your title</div>
...

Điều chỉnh hình ảnh và chú thích

Với Chủ đề Astra, hình ảnh và chú thích hình ảnh được giữ rất đơn giản. Bóng, văn bản bên trái và không có khung. Với hình phần tử CSS, bạn có thể thêm khung hoặc bóng. Hình vẽ có chứa văn bản bên dưới hình ảnh.

/* Images and Caption */
figure {
  box-shadow: 2px 2px 8px 0px #eaeaea;
}
figcaption {
  text-align: center;
}

Tôi là Beispielcode habe ich rund um Bild und Caption einen Schatten gemacht. Phụ đề Die habe ich noch zentriert.

Tải trước Phông chữ Astra - Dành cho Tốc độ trang của Google

Google PageSpeed ​​Insights phàn nàn về việc tệp phông chữ astra.woff phải được tải bằng thuộc tính rel = ”preload” . Bằng cách này, tệp không làm trì hoãn việc tải toàn bộ trang nữa.

Tải trước các yêu cầu quan trọng
Với bạn có thể ưu tiên truy xuất các tài nguyên hiện được yêu cầu sau khi trang được xây dựng.
… Font / astra.woff

https://developers.google.com/speed/pagespeed/insights/

Bạn có thể thực hiện thay đổi này bằng cách sử dụng bộ lọc. Dán mã sau vào functions.php của chủ đề con Astra của bạn:

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
}

Bạn cũng sẽ tìm thấy mã ở đây: https://gist.github.com/Balachandark/3bc4abaccf1bf07fcec378d1dc59b719

Lưu và tải cục bộ phông chữ Google - Google PageSpeed

Tải phông chữ Google trực tiếp từ Google rất thuận tiện, nhưng nó không tuân thủ quyền riêng tư và không phải là lựa chọn nhanh nhất. Do đó, bạn nên tải xuống các phông chữ Google mà bạn sử dụng và sau đó phân phối chúng từ máy chủ web của bạn.

Bước 1: Tải xuống Phông chữ

Mario Ranftl cung cấp miễn phí công cụ google-webfonts-helper của mình. Ở đó, bạn có thể chọn phông chữ Google của mình và tải xuống dễ dàng ở tất cả các định dạng cần thiết. Sau đó, tệp .zip phải được giải nén.

Bước 2: Cài đặt plugin

Cài đặt plugin Phông chữ tùy chỉnh, cũng đến từ các nhà phát triển Astra.

Trong Thiết kế> Phông chữ Tùy chỉnh, giờ đây bạn có thể dễ dàng cài đặt các tệp phông chữ đã tải xuống trước đó. Đối với Hiển thị Phông chữ, tốt nhất là chọn “hoán đổi”.

Bước 3: Chọn Phông chữ tùy chỉnh

Bây giờ điều hướng đến Thiết kế> Tùy chỉnh, sau đó đi tới Toàn cầu> Kiểu chữ> Kiểu chữ cơ bản> Họ phông chữ và chọn phông chữ mới tạo của bạn trong Tùy chỉnh .
Bây giờ, phông chữ Google sẽ được tải trực tiếp từ trang của bạn.

Điều chỉnh chiều rộng Asta Gutenberg Block Editor

Nó thực sự khó chịu khi chiều rộng của trình soạn thảo không khớp với chiều rộng trên trang web trực tiếp. Thật không may, Astra đã không thể thay đổi điều này cho đến ngày hôm nay.

Thực ra, nó khá đơn giản. Trước tiên, bạn cần một tệp CSS, được tải bởi Trình chỉnh sửa khối. Của tôi được gọi và nằm trong thư mục chủ đề con của tôi .block-editor-styles.css /assets/css/

Với đoạn mã sau, tôi tải block-editor-styles.css trong tệp :functions.php

add_action( 'enqueue_block_editor_assets', 'j0e_gutenberg_scripts' );
function j0e_gutenberg_scripts() {
  wp_enqueue_style( 'j0e-gutenberg-custom-css',
  get_theme_file_uri( '/assets/css/block-editor-styles.css' ), false );
}

Sau đó, sao chép mã CSS sau vào :block-editor-styles.css

/* Main column width for Boxed and Content in Content Boxed */
.ast-separate-container .wp-block {
  max-width: 800px;
}
/* Main column width for Full Width / Contained und Full Width / Stretched */
.ast-plain-container .wp-block {
  max-width: 1180px;
} 

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
  max-width: 1180px;
}

/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
  max-width: none;
}

Đối với các bài đăng trên blog hẹp hơn, tôi có chiều rộng là 800px, vì vậy bạn phải chọn một trong hai bố cục sau:

  • Đóng hộp
  • Nội dung được đóng hộp

Đối với các trang có chiều rộng đầy đủ, tôi đã nhập 1180px, trong đó hai bố cục sau chịu trách nhiệm:

  • Chiều rộng đầy đủ / Chứa
  • Chiều rộng đầy đủ / Kéo dài

Bạn cần phải điều chỉnh hai giá trị này cho phù hợp với hoàn cảnh của mình.

Hiển thị Astra Ngày cập nhật lần cuối

Đoạn mã này cho bạn biết cách hiển thị ngày “Cập nhật lần cuối” thay vì ngày “Xuất bản”.

Astra đánh dấu ngày datePublisheddateModified tháng dưới dạng đánh dấu Lược đồ, nhưng chỉ ngày tạo mới được hiển thị trực quan. Nếu bạn muốn thay đổi ngày hiển thị thành ngày cập nhật, hãy thêm mã sau vào chủ đề con của bạn :functions.php

/**
 * Display only last modified date in the post metadata.
 *
 */
function j0e_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       .= '';
	$output       .= ' ' . $modified_on . '';
	$output       .= '';
	return $output;
}
add_filter( 'astra_post_date', 'j0e_post_date' );

Gist: https://gist.github.com/gmmedia/a969070af8f7fddc8012a277382a5722

Hiển thị Astra Ngày cập nhật lần cuối

Đoạn mã này cho bạn biết cách hiển thị ngày “Cập nhật lần cuối” và “Đã xuất bản”.

Modified: 02.03.2021 | Published: 13.04.2020

Astra đánh dấu ngày datePublisheddateModified tháng dưới dạng đánh dấu Lược đồ, nhưng chỉ ngày tạo mới được hiển thị trực quan. Nếu bạn muốn hiển thị ngày xuất bản và ngày cập nhật, hãy thêm mã sau vào chủ đề con của bạn :functions.php

/**
/**
 * Astra Theme: Display last modified and published date in the post metadata.
 * See: https://bloggerpilot.com/astra-tipps-tricks/
 */
function j0e_post_date( $output ) {
	$output        = '';
	$format        = apply_filters( 'astra_post_date_format', '' );
	$published_date = esc_html( get_the_date( $format ) );
	$published_on   = sprintf(
		esc_html( '%s' ),
		$published_date
	);
	$modified_date = esc_html( get_the_modified_date( $format ) );
	$modified_on   = sprintf(
		esc_html( '%s' ),
		$modified_date
	);
	$output       .= '';
	$output       .= 'Modified: ' . $modified_on . ' | Published: ' . $published_on;
	$output       .= '';
	return $output;
}
add_filter( 'astra_post_date', 'j0e_post_date' );

Gist: https://gist.github.com/gmmedia/bc6ea0cc4923ba68a56697f6ea88a4a0

Mẹo và Thủ thuật cho Đề xuất Astra?

Bạn có biết bất kỳ đoạn trích hoặc công cụ thú vị nào khác cho Chủ đề Astra không?