WordPressで企業サイトを構築する際にやっておくべきこと覚え書き

半年以内
wordpress_company

今回、はじめてWordPressで企業サイトを制作したのでいろいろと調べまくることになりました。その中でも私が特に「下ならし」として必要だと感じたことを以下にまとめておきます。基本的には次に同様の依頼が来た時に振り返るための私用のまとめです。
※随時更新中

テーマ・テンプレート編

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();が出力するpタグを消したい|クレー射撃と仕事を徒然に。。Trap Shooter Bere

個別に消したい場合はこれ便利。。

 <?php echo strip_tags(category_description()); ?>

参考:category_descriptionやtag_descriptionのPタグを消す

あとjsで消すという手もある。

固定ページの概要を有効にする

function.phpに以下のコードを足す。

add_post_type_support( 'page', 'excerpt' );

※管理画面の上にある「表示オプション」でオンにしないと表示されないので注意。
参考:【WordPress】固定ページでも[抜粋]の機能を有効にしたい。 – ONZE

ショートコードで記事IDを指定してタイトルとか抜粋を表示する

長いので参考サイトを参照。
参考:ショートコードを使って、特定の記事へのリンクを作成してみる。:【49日目】WordPress1日1プラグイン | Alpac@labo:大分県臼杵市でホームページ運営やWordPressやってます。

カスタムフィールドでショートコードを有効にする

<?php echo apply_filters('the_content', get_post_meta($post->ID, 'カスタムフィールド名', true)); ?>

参考:WordPressのカスタムフィールドでショートコードを使う – かちびと.net

テーマの名前を変える

忘れた。よくあるstyle.cssに記述する方法は使ってないけど自分のサイトのテンプレート名になってる。引き続き調べる。

カスタム投稿タイプ編

カスタム投稿タイプ管理用のプラグイン

function.phpで自前で作るのもいいが、労力を考えるとプラグインの方が圧倒的に楽。「Custom Post Type UI」というのを使った。
プラグインは可能な限り使わない方針にしているが、これは導入の価値ありと判断。

カスタム投稿タイプやカスタムタクソノミーやタームの一覧を吐き出す

List Category Postsというプラグインを使う。ちょっと扱いに慣れる必要があるが、テンプレートシステムのカスタマイズの理屈が分かれば超便利。
ショートコードをあんまり増やしたくない場合は重宝。
プラグインは可能な限り使わない方針にしているが、以下略。

使い方は以下参考。
参考:固定ページで新着情報やカテゴリー記事を一覧する方法 | 西沢直木のIT講座

お問い合わせフォーム編

Contact From 7

超有名プラグインらしい。疑いも無くこれを使った。使い方も悩む必要がないくらいシンプル。
よくある確認画面を追加するにはもう一個別のプラグインが必要らしい(まだ開発に進んでないので詳細は不明)。

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タグ';

おまけ:デザイン編

WordPressとはもはや関係ないけど、今回役に立ったcssやjsについても。

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: <integer>;
	order:         <integer>;
}

※子要素に指定。

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

コメント

コメントをどうぞ(承認後に反映されます)




コメント

世の反応