[wp]よく使うWordPress初期設定メモ

2021.11.18

似たようなのを何回も書いてる気がするけど。

どういうアレか

毎度毎度、何回も書いてるのに覚えられない。別段珍しいことをするわけじゃない。

style.css

/*
Theme Name: xxx
Author: xxx
Description: xxx
Version: xxx
*/

埋もれるとアレなんで、@importとかはこれの後に書く。

screenshot.png

880*660px

各ページ

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

各パーツにバリエーションをもたせたときのファイル名と呼び出し方。

header-common.php
<?php get_header('common'); ?>

別のphpファイルを呼び出す

phpなのでincludeが使える。

同テーマ内
<?php include( get_template_directory().'parts/head.php' ); ?>
親テーマ内
<?php include( TEMPLATEPATH . 'parts/head.php' ); ?>
子テーマ内
<?php include( STYLESHEETPATH . 'parts/head.php' ); ?>

WPタグにもそれっぽいのがある。

<?php get_template_part('parts/head');?>

子テーマ→親テーマの順で探してくるという内容。

header.php

ogp

<head>もいじってるので注意。

抜粋があれば優先、サイトのキャッチフレーズも活用するので注意。

固定ページはfunctions.phpで抜粋を有効化する。

ついでだからog:descriptionだけじゃなくてdescriptionも入れる。

<?php /* ogp start */ ?>
<?php if(is_home() || is_front_page()) : ?>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<?php else: ?>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<?php endif; ?>
<?php if ( is_single()): ?>
	<?php
    if ($post->post_excerpt):
        $myDescription = get_the_excerpt();
	else :
        $summary = strip_tags($post->post_content);
        $summary = str_replace("\n", "", $summary);
        $summary = mb_substr($summary, 0, 120);
        $myDescription = $summary;
	endif;
    ?>
<?php elseif ( is_home() || is_front_page() ): ?>
    <?php $myDescription = get_bloginfo('description'); ?>
<?php elseif ( is_category() ): ?>
    <?php
    if(category_description()):
        $myDescription = category_description();
    else:
        $myDescription = get_bloginfo('description');
    endif;
    ?>
<?php elseif ( is_tag() ): ?>
    <?php
    if(category_description()):
        $myDescription = tag_description();
    else:
        $myDescription = get_bloginfo('description');
    endif;
    ?>
<?php elseif ( is_page() ): ?>
    <?php
    if(get_the_excerpt()):
        $myDescription = get_the_excerpt();
    else:
        $myDescription = get_bloginfo('description');
    endif;
    ?>
<?php else: ?>
    <?php $myDescription = get_the_excerpt(); ?>
<?php endif; ?>
    <meta name="description" content="<?php echo $myDescription; ?>" />
    <meta property="og:description" content="<?php echo $myDescription; ?>">
    <meta property="og:title" content="<?php if(is_home() || is_front_page()): bloginfo('name'); else: the_title(); endif; ?>">
    <meta property="og:type" content="<?php if(is_home() || is_front_page()): ?>website<?php else: ?>article<?php endif; ?>">
<?php if ( is_home() || is_front_page() ): ?>
    <meta property="og:url" content="<?php echo esc_url( home_url( '/' )); ?>">
<?php else: ?>
    <meta property="og:url" content="<?php echo get_the_permalink(); ?>">
<?php endif; ?>
<?php if(has_post_thumbnail()): ?>
    <meta property="og:image" content="<?php the_post_thumbnail_url('full'); ?>">
<?php else: ?>
    <meta property="og:image" content="<?php echo esc_url(get_template_directory_uri()); ?>/img/common/ogp.jpg">
<?php endif; ?>
    <meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>">
    <meta property="og:locale" content="ja_JP">
    <meta name="twitter:card" content="summary_large_image">
    <?php /* ogp end */ ?>

ボリュームすごいから別ファイルにして読ませたほうがいい気もする。

css、js周り

メモ：キャッシュに負けないためにパラメータをつける。

<link rel="stylesheet" href="<?php echo esc_url(get_template_directory_uri()); ?>/style.css?<?php echo date('Ymd'); ?>">

functions.php

<title>とかアイキャッチ画像とか、デフォルトだと生成されないやつ、有効化されてないやつがある。

<?php 
//titleタグ生成
add_theme_support( 'title-tag' );
function wp_document_title_separator( $separator ) {
    $separator = '|';
    return $separator;
}
add_filter( 'document_title_separator', 'wp_document_title_separator' );
//抜粋からpタグ削除
remove_filter('the_excerpt', 'wpautop');
//記事抜粋文字数
function my_excerpt_length($length) {
    return 120;
}
add_filter('excerpt_mblength', 'my_excerpt_length');
//抜粋末尾省略文字変更
function my_excerpt_more($more) {
    return '';
}
add_filter('excerpt_more', 'my_excerpt_more');
//固定ページ抜粋文有効化
add_post_type_support('page','excerpt');
//アイキャッチ有効化
add_theme_support('post-thumbnails');
//H2にspan追加
function the_content_after_filter($content) {
    $content = str_replace('<h2>','<h2><span>',$content);
    $content = str_replace('</h2>','</span></h2>',$content);
    return $content;
}
add_filter('the_content', 'the_content_after_filter', 10);
//親ページ条件分岐用
function is_parent_slug() {
    global $post;
    if ($post->post_parent) {
        $post_data = get_post($post->post_parent);
        return $post_data->post_name;
    }
}

親ページの条件分岐は入れておくと何かと便利。

条件：固定ページスラッグ「form」または「form」を親に持つページ
<?php if(is_page('form')|| is_parent_slug() === 'form'): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/form.css">
<?php endif; ?>

整理したい場合はファイルを分けて読み込むのもあり。

include( get_template_directory().'functions/example.php' );

require_once locate_template('functions/example.php');

locate_templateはwp側のタグ。

URLタグ周り

トップページ
<?php echo esc_url( home_url( '/' ) ); ?>
テンプレートディレクトリ
<?php echo esc_url(get_template_directory_uri()); ?>

esc_url()は無くても動くけどあった方がセキュリティ的にいい感じになる。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/esc_url
wpdocs.osdn.jp

カスタム投稿一覧取得

最低限だけ。

<?php
$myQuery = new WP_Query();
$param = array(
    'posts_per_page' => '-1', //記事全部
    'post_type' => '【カスタム投稿名】',
);
	$myQuery->query($param);
?>
<?php if($myQuery->have_posts()): ?>
<ul>
<?php while($myQuery->have_posts()) : $myQuery->the_post(); ?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

リセットで締めないと以降に影響するので注意。

ページャーつける前提だと凝ったことになるので今回は割愛。

WP-PageNavi

プラグインだけど個人的に必須なんで。

WP-PageNavi
より高度なページ送りナビゲーション用のインターフェースを追加します。
ja.wordpress.org
 
<div class='wp-pagenavi' role='navigation'>
<span class='pages'>2 / 5</span>
<a class="previouspostslink" rel="prev" aria-label="Previous Page" href="https://example.com/custompost/">«</a>
<a class="page smaller" title="Page 1" href="https://example.com/custompost/">1</a>
<span aria-current='page' class='current'>2</span>
<a class="page larger" title="Page 3" href="https://example.com/custompost/page/3/">3</a>
<a class="page larger" title="Page 4" href="https://example.com/custompost/page/4/">4</a>
<a class="page larger" title="Page 5" href="https://example.com/custompost/page/5/">5</a>
<a class="nextpostslink" rel="next" aria-label="Next Page" href="https://example.com/custompost/page/3/">»</a>
</div>

こんな形で出てくる。プラグイン側のcssを設定で無効化して自分でstyleを当て込むのが無難。

Contact Form 7

Contact Form 7
お問い合わせフォームプラグイン。シンプル、でも柔軟。
ja.wordpress.org

2021年11月現在、改行部に<br>が自動挿入される。それだと幸せになれないので挿入されないようにする。

/* contacrform7の<br>自動挿入解除 */
define ('WPCF7_AUTOP', false);

「require_once ABSPATH . ‘wp-settings.php’;」の手前に書く。

まとめ

テクニカルなもんでもないから既存のやつを覗けばいいんだけど、それもめんどくなってきたので記事にした。

やっていくとメモっときたいのが多いと気が付いた。個別に書くのがいいかもしれない。

スポンサーリンク

コメント

タイトルとURLをコピーしました