静的サイトからWordPressにする構築手順マニュアル

  • 投稿日
  • 更新日
  • 著者 soichiro
  • カテゴリー Webサイト

この記事では静的サイトにWordPressを導入する構築手順を解説します。

WordPressテーマを作ります

wp-content > themes　と進みます。themesフォルダ内に、作成した静的ファイルのフォルダを入れます。

フォルダ内にstyle.cssを作り、index.html→index.phpに直します。←これでWordPressに静的サイトがテーマとして認識されます。

Style.css内に下記を記入します。

/*
Theme Name: テーマ名 ←ここにテーマ名を入れます
Author: Author Name　←ここに制作者名を入れます
*/

静的ファイルを動的に（WP化）する

〇〇.htmlというファイル名を〇〇.phpに書き換えます。

では次に静的サイトを動的にするために、必須のWordPressのタグをindex.phpに記入します。

必須のWPタグ

</head>の直前に    <?php wp_head(); ?>　を追加

    <link rel="stylesheet" href="./common/css/style.css">
    <?php wp_head(); ?>
</head>

</body>の直前に　<?php wp_footer(); ?>　を追加

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./common/js/common.js"></script>
    <?php wp_footer(); ?>
</body>

これで管理ツールバーが表示されるようになります。

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(); ?> を書きます。