ミギムキ

[WordPress] コピペで使えるページタイトルエリアのテンプレート

やりたいこと

サンプルコード

html

<?php if( !is_home() ) { $page_title = ''; if( is_tax() ) { $taxonomy = get_query_var( 'taxonomy' ); $term = get_term_by( 'slug', get_query_var( 'term' ), $taxonomy ); $page_title = '「'. $term->name .'」関連'; } elseif( is_post_type_archive() ) { $page_title = get_post_type_object( get_post_type() )->label; } elseif( is_category() ) { $category = get_the_category(); $page_title = $category[0]->cat_name; } elseif( is_404() ) { $page_title = 'ページが見つかりませんでした'; } elseif( post_custom( 'h1_title' ) ) { $page_title = post_custom( 'h1_title' ); } else { $page_title = get_the_title(); } ?> <div class="page_header"> <h1><?php echo $page_title ?></h1> </div>
スポンサー広告

CSS

.page_header { position: relative; height: 200px; background-image: url(./images/page_title/bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .page-xxx .page_header { background-image: url(./images/page_title/bg_xxx.jpg); } .page_header > h1 { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 90%; color: #fff; text-align: center; }

仕組み、解説、補足など

スポンサー広告