今回、はじめてWordPressで企業サイトを制作したのでいろいろと調べまくることになりました。その中でも私が特に「下ならし」として必要だと感じたことを以下にまとめておきます。基本的には次に同様の依頼が来た時に振り返るための私用のまとめです。
01. テーマ・テンプレート編
まずは今回となるテーマの編集やテンプレートまわりから参ります。
PHPファイルを固定ページのテンプレートとして選択できるようにする
テンプレートとして用意したPHPファイルの冒頭にこんな感じで記述。
<?php
/*
* Template Name: テンプレート名
*/
get_header(); ?>抜粋の出力を調整
function.phpを調整する。
文字数を調整する：
function my_excerpt_length($length) {
return 80;
}
add_filter('excerpt_length', 'my_excerpt_length');｢の続きを見る｣部分を変更する
function my_excerpt_more($more) {
return '…';
}
add_filter('excerpt_more', 'my_excerpt_more');WordPressで記事本文を抜粋表示する文字数と文末の[…]を変更する方法 | ホワイトベアー株式会社
余計なpタグを消す
function.phpに以下のコードを足す。ただしこれだとだとサイト全部から消える。
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );[WordPress]自動挿入されるPタグを削除する * 制作・開発・構築メモ – コードドロップ
固定ページは消したいけど、記事ページは消したくない場合は、ちょっとめんどいが、固定ページのテンプレートPHP内の記述the_content(); の前に以下のコードを足す。
<?php remove_filter('the_content', 'wpautop'); ?>the_content();が出力するｐタグを消したい｜クレー射撃と仕事を徒然に。。Trap Shooter Bere
個別に消したい場合はこれ便利。
<?php echo strip_tags(category_description()); ?>category_descriptionやtag_descriptionのPタグを消す
あとjavascriptで消すという手もあるが、邪道な気がする。
固定ページの概要を有効にする
function.phpに以下のコードを足す。
add_post_type_support( 'page', 'excerpt' );※管理画面の上にある「表示オプション」でオンにしないと表示されないので注意。
【WordPress】固定ページでも［抜粋］の機能を有効にしたい。 – ONZE
ショートコードで記事IDを指定してタイトルとか抜粋を表示する
長いので参考サイトを参照。
ショートコードを使って、特定の記事へのリンクを作成してみる。:【49日目】WordPress1日１プラグイン | Alpac@labo：大分県臼杵市でホームページ運営やWordPressやってます。
phpファイル(テンプレート)内でショートコードを呼び出す
<?php echo do_shortcode('[XXXXXX]'); ?>カスタムフィールドでショートコードを有効にする
<?php echo apply_filters('the_content', get_post_meta($post->ID, 'カスタムフィールド名', true)); ?>WordPressのカスタムフィールドでショートコードを使う – かちびと.net
テーマの名前を変える
忘れた。よくあるstyle.cssに記述する方法は使ってないけど自分のサイトのテンプレート名になってる。引き続き調べる。
特定の固定ページの下層記事の一覧を出力する
以下サンプルコード。
<?php
$the_query = new WP_Query(
array(
'post_parent' => 999,
'post_type' => 'page',
'orderby' => 'menu_order',
'order' => 'ASC',
'posts_per_page' => -1
)
);
if ( $the_query->have_posts() ):
?>
<ul>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
ここにループしたい内容
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>- post_parent: 親のページID(スラッグでも指定可)
- orderby: 並び順のルール。固定ページの場合は管理画面で設定した順序に従いたい場合が多いと思うので menu_order を使う事が多いのでは。
- order: ASCが昇順
- posts_per_page: 全記事表示したい場合は -1
各種パラメータはここを参照
関数リファレンス/WP Query – WordPress Codex 日本語版
特定ページの配下にいるかどうかを判定する
<?php if( $post->post_parent == 999 ): ?>上記は親ページIDが999の場合
02. カスタム投稿タイプ編
どんなサイトだろうと必須になるであろうカスタム投稿タイプについて。
自前で作る
慣れるとプラグインを使わずにfunction.phpで自前で作った方が楽。以下サンプル。
// カスタム投稿タイプを追加
function add_custom_post_type(){
register_post_type(
'cases', // 投稿タイプ名
array( // オプション
'label' => '実績', // 投稿タイプの名前
'labels' => array(
'add_new' => '実績を追加する',
'all_items' => '実績一覧を表示',
),
'public' => true, // 利用する場合はtrueにする
'has_archive' => false, // この投稿タイプのアーカイブを有効にする
'menu_position' => 5, // この投稿タイプが表示されるメニューの位置
'show_in_rest' => true, // 5系から出てきた新エディタ「Gutenberg」を有効にする
'menu_icon' => 'dashicons-edit', // メニューで使用するアイコン
'supports' => array( // サポートする機能
'title',
'editor',
'thumbnail',
'excerpt',
)
)
);
}
add_action('init', 'add_custom_post_type');プラグインを使う
function.phpで自前で作るのもいいが、労力を考えるとプラグインの方が圧倒的に楽。「Custom Post Type UI」というのを使った。プラグインは可能な限り使わない方針にしているが、これは導入の価値ありと判断。
カスタム投稿タイプやカスタムタクソノミーやタームの一覧を吐き出す
List Category Postsというプラグインを使う。ちょっと扱いに慣れる必要があるが、テンプレートシステムのカスタマイズの理屈が分かれば超便利。ショートコードをあんまり増やしたくない場合は重宝。
プラグインは可能な限り使わない方針にしているが、以下略。
使い方は以下参考。
固定ページで新着情報やカテゴリー記事を一覧する方法 | 西沢直木のIT講座
03. お問い合わせフォーム編
恥ずかしながら、個人の制作でお問い合わせフォームを作ったのが今回初めてなのであまりちゃんと調べられていません。
Contact From 7
超有名プラグインらしい。疑いも無くこれを使った。使い方も悩む必要がないくらいシンプル。よくある確認画面を追加するにはもう一個別のプラグインが必要らしい(まだ開発に進んでないので詳細は不明)。
04. PHP編
数年に一度しか触らないのですぐ忘れてしまいます。
アイキャッチ画像を背景画像に指定する
<section style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>);"></section>[WordPress] アイキャッチのURLを取得してCSSで背景画像に設定する方法 * prasm
カスタムタクソノミーのタームをリンク無しで出力する
$terms = get_the_terms( get_the_ID(), 'portfolio_cats' );
if ( !empty($terms) ) {
if ( !is_wp_error( $terms ) ) {
foreach( $terms as $term ) {
echo $term->name;
}
}
}トピック: get_the_term_listをリンクなしで表示する方法を教えてください。 « サポートフォーラム — WordPress
echoの文法
PHPは数年に一度しか触らないので毎回忘れるのでメモしとく。
echo 'htmlタグ'.php関数.'htmlタグ';ショートコードでhtmlを使い回す
function.phpにhtmlを書いといて、固定ページや投稿ページから呼び出す事ができる。
function.phpでの記述
function sample_shortcode() {
return '<section>
<div>
<p>共有化したいhtmlなど</p>
</div>
</section>';
}
add_shortcode('sample', 'sample_shortcode');” でくくっておけば改行OK。
呼び出し方
[sample]
05. デザイン編
もはやWordPressとは関係ないが、今回役に立ったCSSやJavascriptについても。
Flexbox
数年ぶりにhtmlコーディングしたらこんな便利なものができてた。あのクソ扱いづらいfloatに悩む日々よさらば。
よく使うのだけ抜粋。
基本的な設定。横並びにしたい要素の親要素にかける。
.flex-container {
display: -webkit-flex;
display: flex;
}縦並び。
.flex-container {
-webkit-flex-direction: column;
flex-direction: column;
}折り返したい場合
.flex-container {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}左右の並び方を指定する。
.flex-container {
-webkit-justify-content: ****;
justify-content: ****;
}左に詰める場合は「flex-stat」、右に詰める場合は「flex-end」、中央は「center」、左右いっぱいに等間隔は「space-between」、全要素等間隔は「space-around」。
縦位置を指定する。
.flex-container {
-webkit-align-items: *****;
align-items: *****;
}下詰は「flex-end」、中央揃えは「center」。
要素の表示順を指定する。
スマホ対応の時にアイキャッチ画像と記事タイトルの順序入れ替えたい時に重宝。
.flex-item {
-webkit-order: ;
order: ;
} ※子要素に指定。
colisさんのこのページは相当お世話になりました。
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
Google Material Icon
ウェブサイト用のアイコンフォントはいろいろ試してきたけど、「googleはなんか信頼できそう」という理由で今回使ってみた。
使い方：
headで以下のcssを読み込む。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">あとはiタグでこんな感じに。
<i class="material-icons">face</i>Material icons – Material Design
![[WordPress] 未来投稿を使ってライブとかイベント予定リストを作る](https://imasashi.net/blog/wp-content/uploads/2011/10/wp.png)
![[WordPress] facebookやgoogle+でリンク貼られた時の自動サムネイル表示の制御](https://imasashi.net/blog/wp-content/uploads/2011/12/fb_thumb.jpg)
CONVERSATION