#WordPressサイトをローカルで開発する簡単な方法
LOCAL
こちらをダウンロードするだけで自分のPCにWarodPress開発に必要な環境が準備できます。
LOCALの管理画面
#WordPressのテンプレート階層です
テンプレート階層
左側のファイルがあればそれが優先されて表示されるようになります。
#日本語に対応させる
LOCALの管理画面のADMINから管理画面にログインします。
次に、プラグインの「WP Multibyte Patch」をインストールして有効化します。
#サイトのタイトルを付ける
#サイトの時刻形式を変更する
#テーマの選択をする
#子テーマを作成する
既存のテーマをもとにアレンジを加える場合には子テーマを使用します。
LOCALの管理画面のサイト名の下のリンクからディレクトリを表示し、
Local Sites/mysite/app/public/wp-content/themes/
の中に自作のテーマのフォルダを作成します。
##「style.css」を作り、下記を記述する
/*
Theme Name: フォルダ名
Author: 作成者
Template: 元にするテーマ名
Version:元にするテーマのバージョン
*/
/* ここから下は元のCSSをコピペするでもいい */
##自分で変更して使用したいファイルを作成
single.phpなど
##「functions.php」を作り、下記を記述する
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
functions.phpは全てのファイルが参照するフックを記述するファイルです。
#必ず全てのテンプレートファイルに入れる必須のテンプレートタグ
'wp_head' アクションをスタートさせる。
<?php wp_head(); ?>
</head>の直前に記述します
<?php wp_footer(); ?>
</body>の直前に記述します
この２つを入れるとログイン時のみ、管理ツールバーが表示されるようになります。
管理ツールバーを画面の下にしたい時は「Admin Bar Position」というプラグインを使用するとすぐできます。
#投稿ページのURLを指定する
ちなみに、このパーマネントリンクの設定を変更し、保存した場合
app/public/の中に「.htaccess」という隠しファイルが生成されます。
「⌘＋shift＋.」で表示できるようになります。
#投稿名をURLに含める場合は投稿画面で指定できる
(保存していないと指定出来ないので注意)
#固定ページのURLを指定する
#投稿画面
#投稿者名を変更する
#アイキャッチ画像を使用できるようにする
各テーマのフォルダ内にfunctions.phpを作成し、下記を記述します
<?php
add_action('init',function(){
add_theme_support('post-thumbnails');
});
add_action()特定のアクションに関数をフックします。'init'で初期設定として扱われます。
add_theme_support()テーマやプラグインが特定のテーマ機能をサポートすることを許可する
こうすることで、投稿の画面で画像を選択できるようになります。
#画像のサイズを指定する
#フォームを作成する
「MW WP Form」や「Contact Form 7」などのプラグインをインストールし有効化することで作成すことが出来ます。
今回は「MW WP Form」を有効化します。
フォームの最後に確認ボタン、戻るボタン、送信ボタンをセットで付けるようにしましょう。
バリデーションや、完了画面のメッセージ、自動送信メールなどの設定なども行えます。
##固定ページでフォーム画面を作成する。
これでフォーム画面ができました
#投稿をカテゴリーとタグで分類する
カテゴリ画面
タグ画面
投稿画面でカテゴリとタグを付ける
カテゴリーは何も設定しない場合にも標準に設定したカテゴリーが付与されるようになっています。
##標準に設定するカテゴリを指定する
カテゴリー(別一覧)はカテゴリーアーカイブのページに分類されます。
#アーカイブページを共通のarchve.phpを使用し、作成する
条件分岐タグを使用しテンプレートを共有することができます。
<div class="site-heading">
<?php if(is_category()){ ?>
<h1>Category</h1>
<?php }elseif(is_tag()){ ?>
<h1>Tag</h1>
<?php }elseif(is_author()){ ?>
<h1>Author</h1>
<?php } ?>
<span class="subheading"><?php wp_title(''); ?></span>
</div>
is_category()は表示されているページがカテゴリーアーカイブかチェックします。
is_tag()は表示されているページが指定された投稿タグが表示されている場合は true を、そうでない場合は false を返します。
is_author()は表示されているページが投稿者アーカイブページかをチェックします。
#ページネーションを作成する
<?php
function pager_link(){
$previous_link = get_previous_posts_link('← 新しい記事へ');
$next_link = get_next_posts_link('古い記事へ →');
echo(str_replace('<a','<a class="btn btn-primary float-left"',$previous_link));
echo(str_replace('<a','<a class="btn btn-primary float-right"',$next_link));
}
?>
<?php pager_link() ?>
get_previous_posts_link( 'リンクに表示する文字', リンクを表示するページ番号の上限(数値) )は投稿のひとつ前のセットへのリンクを取得します。
get_next_posts_link( 'リンクに表示する文字', リンクを表示するページ番号の上限(数値) )は投稿の次のセットへのリンクを取得します。
ただし、classなどは入らないため、書き換えを行います。
**str_replace()**はPHPの関数です。str_replace('変換元の文字列','変換先の文字列',変換対象を探す文字列)
#メニューを作成する
各テーマのフォルダ内にfunctions.phpを作成し、下記を記述します。
add_action('init',function(){
register_nav_menus([
'global_nav' => 'グローバルナビゲーション'
]);
});
add_action()特定のアクションに関数をフックします。'init'で初期設定として扱われます。
**register_nav_menus( ['キー' => '位置名'] )**でメニューを有効化できます。
今回の例だと、「global_nav」をキーとして「グローバルナビゲーション」の位置に指定したメニューを紐付けられるようにします。
##メニューを作成します
##準備したメニューを表示させる
<?php
$menu_name = 'global_nav';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu -> term_id);
?>
<?php foreach($menu_items as $item){ ?>
<li class="nav-item">
<a class="nav-link" href="<?php echo esc_attr($item->url); ?>">
<?php echo esc_html($item->title);?>
</a>
</li>
<?php } ?>
**get_nav_menu_locations()**は「register_nav_menus()」で登録されたメニューがあれば連想配列で取得できます。['キー' => メニューID]
**wp_get_nav_menu_object()**は登録されたメニューID(menu_id)を指定してメニューの内容をオブジェクトとして取得します。
wp_get_nav_menu_items(タームID)はタームID(term_id)を指定して該当のメニューに登録した項目をオブジェクトとして取得します。
$menu_itemsをforeachで繰り返し処理をしてオブジェクトの中のURLと項目名を表示します。
esc_attr('文字')は文字参照をエンコードします。HTML要素（特にフォーム値）をエスケープする場合は必ず使用してください。
esc_html('文字')はHTMLタグをエスケープ処理します。
#テストで使用するデータを簡単準備
テーマユニットテストここにテスト関連の情報があります。
その中から、テストデータをダウンロードできます。
ダウンロードしたzipファイルをクリックして解凍しておきます。
メディアのインポートに失敗しました。と出た場合でも大丈夫。
画像がインポートされていないだけ。
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// ループ内のコード
endwhile;
else :
echo wpautop( '投稿が見つかりませんでした。 );
endif;
?>
have_posts()は真偽値を返します。
the_post()**はループを次の投稿へ進めます。
wpautop()はpタグに変換されます
ちなみに個別投稿ページでも使用します。
この場合、繰り返し処理を行うのではなく、必要な投稿データを取得するように動作します。
<?php the_title( タイトルの前の文字, タイトルの後ろの文字, 表示するか ); ?>
ループの外ではget_the_title() を使います。
<?php the_excerpt(); ?>
投稿の抜粋の文字列を取得する場合はget_the_excerpt()を使用します。
投稿に抜粋が設定されていない場合は本文の冒頭から抜き出して表示されます。
<?php the_author(); ?>
投稿の作者を取得する場合はget_the_author()を使用します
<?php the_time('フォーマット'); ?>
フォーマットはこちらを参考にできます
投稿の公開時刻を取得する場合はget_the_time()を使用します
###ループの中で個別投稿ページへのリンクURLを表示します。
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
これにより、個別投稿ページに遷移できるようになります。参照
<?php get_header(); ?>
header.phpに共通パーツを切り分けた場合、そのheader.phpを読み込みます。
header.phpのファイル名は固定となります
<?php get_footer(); ?>
footer.phpに共通パーツを切り分けた場合、そのfooter.phpを読み込みます。
footer.phpのファイル名は固定となります
<?php get_sidebar(); ?>
sidebar.phpに共通パーツを切り分けた場合、そのsidebar.phpを読み込みます。
sidebar.phpのファイル名は固定となります
<?php get_template_part('ファイル名'); ?>
引数には読み込むファイル名を拡張子なしで記述します。
また、ディレクトリを分ける時は/区切りで相対パスのように記述します。
<link href="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
今回の例では「http://mysite.local/wp-content/themes/myblog」が置き換わっています
これにより、サイトの移行を行なった場合にも対応が可能になります。
子テーマのディレクトリを取得する場合なget_stylesheet_directory_uri()を使用します
ちなみに、「https://fonts.googleapis.com」のような部分は「//fonts.googleapis.com」にすることで使用するプロトコルに応じてhttpsかhttpに振り分けてくれるそうです。
###個別投稿ページにおいてループの中で現在の投稿の本文を出力します
<?php the_content(); ?>
###画像を表示する
<?php the_post_thumbnail(サイズ,imgタグに含める属性) ?>
<?php the_post_thumbnail(array(100,100), array('alt'=>'アイキャッチ')) ?>
サイズはキーワード（thumbnail, medium, large, full）でもできます
###画像のURLを取得する
<?php
function get_eyecatch(){
if(has_post_thumbnail()){
$id = get_post_thumbnail_id();
$img = wp_get_attachment_image_src($id,'large');
}else{
$img = array(get_template_directory_uri().'/img/about-bg.jpg');
}
return $img;
}
?>
<?php $img = get_eyecatch(); ?>
<header class="masthead" style="background-image: url('<?php echo $img[0]; ?>')">
wp_get_attachment_image_src( ID, サイズ, アイコンの使用 )はメディアライブラリにあるアップロードした画像のIDを指定して取得します
戻り値は配列 array( url, 幅, 高さ, 真偽値(リサイズされているか？) )
get_post_thumbnail_id( 投稿のID )は投稿のアイキャッチ画像がセットされている場合は、アイキャッチ画像の ID を返します。
引数は省略した場合はNULL（現在の投稿）になります
has_post_thumbnail()は投稿にアイキャッチ画像が登録されているかをチェックします
<html <?php language_attributes();?> >
<body <?php body_class(); ?> >
###タグマネージャーに対応するプラグイン等で使用します。
bodyの開始タグの直後に記述します
<body>
<?php wp_body_open(); ?>
<?php wp_title('区切り文字',表示するか否か,区切り文字を配置する位置); ?>
区切り文字は初期値に '»'が入っています。区切り文字をなくしたい場合は「''」とします。
###参照文字をエンコード
<?php $fname = esc_attr( '文字列' ); ?>
<?php esc_html( '文字列' ) ?>
<?php esc_url( 'URL', 許容するプロトコルの配列, URLをどのように用いるか ); ?>
<?php esc_sql( $sql ); ?>
<?php bloginfo( 情報のキーワード名 ); ?>
'name'で管理画面の「設定 > 一般」で設定された「サイトのタイトル」
'description' で管理画面の「設定 > 一般」で設定された「キャッチフレーズ」など