この記事では静的サイトにWordPressを導入する構築手順を解説します。
まずローカル環境でWP構築できる環境を作ります。
前提として既に静的サイトを作っている(または用意してある状態だと)思います。
私はLocal を使っています。Localが使いやすいのでダウンロードしましょう。
(localの設定記事)
localで新規でWordPressサイトを立ち上げます。サイト名は好きな名前で登録します。
新規で作ったサイトのフォルダの中に入ります。
まずWordPressテーマを作る
wp-content > themes と進みます。themesフォルダ内に、作成した静的ファイルのフォルダを入れます。
フォルダ内にstyle.cssを作り、index.html→index.phpに直します。←これでWordPressに静的サイトがテーマとして認識されます。
Style.css内に下記を記入します。
/*
Theme Name: テーマ名 ←ここにテーマ名を入れます
Author: Author Name ←ここに制作者名を入れます
*/
静的ファイルを動的に(WP化)する
では次に静的サイトを動的にするために、必須のWordPressのタグをindex.phpに記入します。
必須のWPタグ
</head>の直前に <?php wp_head(); ?> を追加
</body>の直前に <?php wp_footer(); ?> を追加
これで管理ツールバーが表示されるようになります。
WordPressでcssやjsを適用させる(相対パスから絶対パスへ)
localに静的ファイルを設定したことで、ファイル階層が変わりcssファイルやjsファイルが読み込まれなくなりました。
WordPressでこれらファイルを読み込ませる為に”<?php echo get_template_directory_uri(); ?>”パスの中にを書きます。
style.cssは<head>タグの中の<?php wp_head(); ?>の直前に設置します。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" />
<?php wp_head(); ?>
main.jsは<?php wp_footer(); ?>の直前に設置します。
<!-- jQ読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- js外部ファイル -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/common/main.js"></script>
<?php wp_footer(); ?>
これで、読み込まれるようになりました。
記事の投稿部分に繰り返しのif文を追加
次にいくつかの投稿記事が表示される部分を実装します。
投稿記事を表示させるには「投稿記事があるかどうかを判別するif文」と「その記事を複数件表示させるためのループ文」を書く必要があります。
以下が投稿記事があるかどうかを判別するif文のソースです。
<? if(have_posts()): ?>
//投稿記事がある場合
<?php else: ?>
//投稿記事がない場合
<?php endif;?>
<? if(have_posts()): ?>は記事があるかどうかを表すif文になります。
(※<?php else : ?>は省略可能です。)
if文最後は必ず<?php endif; ?>を書いてif文を閉じます。
次に投稿記事がある場合、「その記事を複数件表示させるためのループ文」を書きます。ループはwhile文で表します。
<?php while (have_posts()) : the_post(); ?>
//この中に複数件表示させる投稿記事を書きます。
<?php endwhile; ?>
<?php while (have_posts()) : ?>は投稿記事がある場合、while文がtrueとなり、中身の記事を表示することができます。
しかし、これだけだと、同じ投稿をループで何度も表示させてしまい、次の投稿記事を表示しません。
そこでwhile文の中に the_post();を書いて、次の投稿記事を表示できるようにします。
そして、最後に必ず<?php endwhile; ?>を書いて閉じます。
ここまで理解できましたら、if文とwhile文をガッチャンコします。以下が完成形のソースです。
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
//ここに投稿記事を書く
<?php endwhile; ?>
<?php endif; ?>
その他、よく使うWordPressタグ
日付
<?php the_date(); ?> | 同じ投稿日の日付は出ない |
<?php the_time(“Y/m/d”); ?> | 同じ登校日の日付も出る |
抜粋
<?php the_excerpt(); ?>
投稿ページのリンクをつける
<?php the_permalink(); ?>
パーツファイル化する
WordPressではソースコードをパーツに分割することができます。例えば、header や footerなどサイト全体に共通する部分をパーツに分割することで、1箇所修正すれば、全体に反映されるので、運用がしやすくなります。
header.php ファイルを作る
header.phpを作り、作ったheader.phpに<head>タグの中身だけをコピペします。
index.phpには<head>ダグ内を削除して代わりに <?php get_header(); ?> と書きます。
こうすることで、index.php と書いた箇所に header.phpの内容が読み込まれます。
footer.php ファイルを作る
footer.phpを作り、作ったfooter.phpに</body>タグの直前(js読み込みのところ)までをコピペして footer.phpに貼ります。
index.phpには削除して代わりに <?php get_footer(); ?>を書きます。
汎用ソースコードをパーツファイル化する
header.phpやfooter.php以外に共通化したいソースコードをパーツファイル化することができます。
好きな名前でフォルダを作ります。(partsファイルを作る)
<?php get_template_part(“parts/header”); ?>
投稿ページ(single.php)を完成させる
投稿のデータ出力するときには、(たとえ一件のみでも)必ずループを書きます。
ループはWPの用語で投稿の各データを取り出す間のこと
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
↑ 年のため 上記のコードを <?php if(have_posts()): ?> と<?php endif; ?> で囲む
タイトルに <?php the_title(); ?>
本文には <?php the_content(); ?>
サムネイルを登録したい→functions.phpを作成
functions.phpに 以下ソースコードを書きます
<?php
add_action('init', function(){
add_theme_support('post-thumbnails');
});
?>
サムネ表示したい場所に <?php the_post_thumbnail(); ?>
<?php the_post_thumbnail(); ?>
Single.phpページの仕上げ
<html lang=”ja”> → <html <?php language_attributes(); ?>>
<body> → <body <?php body_class(); ?>>
<body <?php body_class(); ?>> の直下に <?php wp_body_open(); ?>
投稿タイプを増やす(カスタム投稿タイプの作り方)
例えば、製品という名前のカスタム投稿タイプを作りたい場合、functions.phpファイルに以下のソースコードをコピペします。
<?php
add_action('init', function(){
register_post_type('item',[
'label' => '製品',
'show_in_rest' => true,//旧エディターから新エディターへ
'public' => true
]);
});
?>
カスタム投稿タイプにカテゴリを追加できるようにする
functions.phpに 以下ソースコードを書きます
add_action('init', function(){
register_taxonomy('gerne','works',[
'label' => '製品カテゴリー',
'hierarchial' => true,
]);
カスタムフィールドを表示させる
functions.php 内の supports に custom-fields を追加します。
<?php
add_action('init', function(){
register_post_type('item',[
'label' => '製品',
'show_in_rest' => true,//旧エディターから新エディターへ
'supports' => ['thumbnail','title','editor','page-attributes','custom-fields'],
'public' => true
]);
});
?>
その後、投稿編集画面から‥をクリックして、オプション→カスタムフィールドを表示させます。
カスタム投稿を表示させたい場所に<php? get_post_meta(‘フィールド名’) ?> を書いて、表示させます。
ページネーションを表示させるタグ
- <?php next_posts_link(); ?>
- <?php get_next_posts_link(); ?>
アーカイブページの作成
- アーカイブのタイトル(カテゴリー名)→ <?php wp_title(”); ?>
グローバルメニューを設定する
functions.php 内の 下記をコピペします。
register_nav_menus([
'global_nav' => 'グローバルナビゲーション'
]);
その後表示させたい場所に
<?php wp_nav_menu(); ?> を書きます。