iEhohs.com

ウェブ&システム担当の仕事メモ的なブログ。個人的な記事ばかりです。

WordPressテーマ編集覚え書き

開発メモ

コーポレートサイトをつくっているのですが、その過程で使えそうなネタを書き留めておきます。

特定のカテゴリー記事の一覧を表示

<?php 
$args = [
    'category_name' => 'test',
    'numberposts' => 3,
    'orderby' => 'modified'
];
// 条件を渡して記事を取得
$custom_posts = get_posts($args);
if($custom_posts): foreach ( $custom_posts as $post ): setup_postdata($post);
	if (has_post_thumbnail()): ?>
	   <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail("thumbnail"); ?></a>
	<?php endif;
    the_modified_date('Y/m/d') ?> 更新</span>
	<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
	<?php the_excerpt(); ?>
</div>

固定ページの子ページをスラッグで指定して表示

<?php
$get_page_id = get_page_by_path("parent-name");
$get_page_id = $get_page_id->ID;
$my_pages = get_posts(array(
    'post_type' => 'page',
    'posts_per_page' => '-1',
    'post_parent' => $get_page_id,
    'orderby' => 'menu_order',
    'order' => 'ASC'
));
if($my_pages):
    foreach ($my_pages as $post):
    setup_postdata($post);
	if (has_post_thumbnail()): ?>
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail("thumbnail"); ?></a>
    <?php endif; ?>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <?php
    // カスタムフィールドの値を取得
    $value = get_post_meta( get_the_ID(), 'custom-name', true );
    // カスタムフィールドの値がある場合
    if( $value ){ 
        echo $value;
    }
    endforeach;
    wp_reset_postdata();
endif; ?>

parent-nameに属する子ページをループで取得。

その後、サムネイルを表示(無ければ空白)、ページタイトルをリンクで表示し、custom-nameのカスタムフィールドを表示させるコードです。

下にも同じような内容のコードを紹介していますが、これはサイドバー向けです。

固定ページ内でPHPを動かすショートコードの作成

functions.php

<?php 
//phpをショートコードで読み込む
function short_php($params = array()) {
  extract(shortcode_atts(array(
    'file' => 'default'
  ), $params));
  ob_start();
  include(get_theme_root() . '/' . get_template() . "/$file.php");
  return ob_get_clean();
}
 
add_shortcode('myphp1', 'short_php');

?>

固定ページ内(カスタムHTML)

[myphp1 file='sample']

sample.phpに書かれた記述が表示されます。

固定ページの子ページを一覧表示(ループ)させる

<?php 
$parentId = get_the_ID();
$args = 'posts_per_page=-1&post_type=page&orderby=menu_order&order=asc&post_parent='.$parentId;
query_posts($args);
if (have_posts()) : 
  $count = 1;
  while (have_posts()) : 
    the_post();
    if ( ( $count % 2 ) > 0 ) {
        $layout	= 'odd';
    } else {
        $layout	= 'even';
    } ?>

// ここにループさせる内容を記述

<?php
    $count++;
   endwhile;
endif;
wp_reset_query();
?>

開いている固定ページの情報から子ページを取得してきます。

上の固定ページ内でPHPを動かすショートコードと組み合わせて使うと効果的。

固定ページにタグ機能を追加

functions.php

//固定ページにタグを設定
 function add_tag_to_page() {
 register_taxonomy_for_object_type('post_tag', 'page');}
add_action('init', 'add_tag_to_page');
 
// タグアーカイブに固定ページを含める
function tags_archives($wp_query) {
    if ( $wp_query->get('tag') )
        $wp_query->set('post_type', 'any');}
add_action('pre_get_posts', 'tags_archives');

上記のリンクの通り、この記述であればタグのアーカイブページでメニューが非表示になる事態を回避できます。

特定ページ(スラッグで指定)のみCSSを追加する

header.php

<?php if ( is_page( 'sample' ) ): ?>
	<link rel="stylesheet" href="<?php echo get_theme_file_uri('sample-style.css'); ?>" />
<?php endif; ?>

sampleというスラッグのページのみ、sample-style.cssを追加します。

ナビゲーションメニューのスマホ表示

画面右下にメニューボタンを配置、画面上部からメニューを下ろして、メニュー内にある閉じるボタンで戻します。

スマホ版で上からメニューがにゅっと降りてくるjQueryを実装してみたを参考にしました。

header.php

<head>
<script type="text/javascript">
	(function($) {
		$(function(){
			$(".open").click(function(){
				$("#header-menu").slideDown();
				$("#menu-btn").fadeOut();
			});
			$(".close").click(function(){
				$("#header-menu").slideUp();
				$("#menu-btn").fadeIn();
			});
		});
	})(jQuery);
</script>
</head>
<body>
<nav id="header-menu">
	<?php wp_nav_menu() ; ?>
	<div id="close-btn"><a class="close"><i class="fas fa-angle-up"></i> メニューを閉じる</a></div>
</nav>

footer.php

<div id="menu-btn">
	<a class="open"><i class="fas fa-bars"></i>
</div>
</body>
</html>

style.css

#menu-btn {
 	position: fixed;
 	bottom: 15px;
 	right: 15px;
	height: 50px;
 	width : 50px;
}
#menu-btn a {
	display: block;
	background-color: #454545;
	text-align: center;
	color: #fff;
	font-size: 1.5em;
	text-decoration: none;
	filter:alpha(opacity=50);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
#close-btn a{
	display: block;
	padding: 1em;
	height: 100%;
	text-decoration: none;
	background: #454545;
	text-align: center;
	border-top: solid 1px #aaa;
	font-size: 0.9em;
	color: #fff;
}
#header-menu {
	display: none;
	width:100%;
 	position: fixed;
	z-index:999;
	top: 0px;
	left: 0px;
}
@media screen and (min-width:950px) {
	#menu-btn,
	#close-btn {
    		display: none !important;
  	}
  	#header-menu {
		display: block !important;
		position: relative;
	}
}

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です