【WordPress】Atuaテーマ

Atuaテーマ概要

「Atua」というテーマは比較的新しく、インストール数も多くなくあまりメジャーではないといえます。

そのため情報が少なく下記の手段で調べる必要がありそうです

  • テーマの公式ページ
  • 製作者サイト
  • GitHubリポジトリ（もしあれば）でカスタマイズガイドやREADMEファイル

参考に「Lightning」と比較し見ると下記です

AtuaLightning
バージョン1.0.9815.29.0
Active installations600+100,000+
PHP version5.67.4
WordPress version4.76.4

Atua の子テーマ Atus でカスタマイズ

下記ページでテーマファイルはダウンロード可能です

Atus

子テーマをインストールするだけで大分デザインが変更されます

Atua 独自で作成した子テーマでカスタマイズ

wp-content/themes/atua-child/を作成

ディレクトリ構成

atua-child
 ┗┳ style.css
  ┣ archive.php
  ┣

style.css

/*
Theme Name: atua Child
Template: atua
*/

WordPress管理画面でテーマ追加画面で子テーマとして認識されます

（注意）テーマを有効化するとフロントページのコンテンツが表示されなくなってしまいます。

archive.php

<?php
/**
 * The template for displaying archive pages.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package Atua
 */

get_header();
?>
<style>
	.dt_post_item {
		margin-bottom: 2rem;

	}
	.dt_post_item > a {
		display: flex;
		align-items: center;
		column-gap: 1rem;
	}

	.post-thumbnail-wrapper {
		flex-shrink: 0;
		position: relative;
		width: 18%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}

	.post-thumbnail-wrapper img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>
<section class="dt_posts dt-py-default">
	<div class="dt-container">
		<div class="dt-row dt-g-5">
			<?php if (  !is_active_sidebar( 'atua-sidebar-primary' ) ): ?>
				<div class="dt-col-lg-12 dt-col-md-12 dt-col-12 wow fadeInUp">
			<?php else: ?>	
				<div class="dt-col-lg-8 dt-col-md-12 dt-col-12 wow fadeInUp">
			<?php endif; ?>	
				<?php if( have_posts() ): ?>
					<?php 
					// Start the loop.
					while( have_posts() ) : the_post(); ?>
						<div class="dt_post_item wow fadeInUp animated" data-wow-delay="100ms" data-wow-duration="1500ms">
							<?php 
							// 元のテーマファイルのコメントアウト
							// get_template_part('template-parts/content','page-2'); 
							?>
							<a href="<?php the_permalink(); ?>">
								<div class="post-thumbnail-wrapper">
									<?php 
										if ( has_post_thumbnail() ) {
											the_post_thumbnail('medium');
										} else {
											echo '<img src="https://www.shoshinsha-design.com/wp-content/uploads/2020/05/noimage-760x460.png" alt="Default Image">';
										}
									?>
								</div>
								<?php the_title(); ?>
							</a>
						</div>
					<?php endwhile; 
					// End the loop.
					
					 // Pagination.
						the_posts_pagination( array(
							'prev_text'          => '<i class="fa fa-angle-double-left"></i>',
							'next_text'          => '<i class="fa fa-angle-double-right"></i>'
						) );
						
						// If no content, include the "No posts found" template.
					else: 
						get_template_part('template-parts/content','none'); 
					endif; ?>
			</div>
			<?php get_sidebar(); ?>
		</div>
	</div>
</section>
<?php get_footer(); ?>