初めてWordPressに取り組むと、エラーなどで戸惑うことがありますよね。
今回は、WordPressでつまずきやすいポイントを紹介します。
これからWordPressを始める方は、ぜひ参考にしてください。
テーマを認識させる
オリジナルテーマをWordPress認識させる方法を紹介します。
ここではローカル環境でMAMPを使用した場合の方法です。
手順1.テーマの格納場所に移動する
まずは、テーマが格納されている場所に移動します。
MAMPフォルダの中の「htdocs/wordpress(オリジナルテーマ)/wp-content/themes」に移動しましょう。
「themes」フォルダまで移動できたら、新しいフォルダを作成します。
(フォルダ名は、任意のモノで構いません。)
そのフォルダの中に「index.php」と「style.css」のファイルを用意します。
この2つのファイルが、フォルダの直下になければ、テーマとして認識されません。
よくある間違いとしては、ファイル名の違いと階層の違いです。
ファイル名の違いとしては以下のようなモノが挙げられます。
「index.html」や「base.css」などファイル名が間違っていれば、認識されることはありません。
階層の違いは、「style.css」ファイルを「css」フォルダの中に入れており、階層が違っている場合があります。
「style.css」ファイルは必ずオリジナルテーマフォルダの直下に格納しましょう。
他にも「style.css」ファイルにヘッダーコメントを追記するのがおすすめです。
「style.css」ファイルにヘッダーコメントを追記することで、「テーマの名前」や「製作者の名前」が管理画面ですぐにわかるようになります。
ヘッダーコメントには、以下のような項目があります。
・Theme Name：テーマの名前
・Theme URI：テーマの詳細情報が記載されているURL
・Author：テーマの開発者名、組織名、団体名など
・Author URI：開発者、組織、団体のURL
・Description：テーマの概要
・Vesion：バージョン
・License：テーマのライセンス
・License URI：テーマのライセンスのURL
他にも、様々な項目がありますが主要なモノは上記の項目です。
CSSの読み込み
次はCSSの読み込みをしましょう。
HTMLファイルでCSSを読み込む場合は、HTMLファイルに以下のコードを記述することで読み込まれます。
<link rel="stylesheet" type="text/css" href="style.css">
しかし、PHPファイル(index.phpファイル)では、このような記述で読み込むことはできません。
WordPressでスタイルシートを読み込むためには、フックを利用します。
手順は以下の通りです。
手順1.「index.php」ファイルの中身を編集する
まずは、「index.php」ファイルの中身を編集します。
「index.html」から「index.php」に変更した場合、スタイルシートを読み込むために以下のようなコードが記述されていると思います。
<link rel="stylesheet" type="text/css" href="style.css">
上記のコードが記述されている場合、このコードを削除してください。
次に以下のコードを追記します。
<!-- headの中に以下のコードを記述する --> <?php wp_head(); ?>
<!-- bodyタグの閉じタグの直前に以下のコードを記述する --> <?php wp_footer(); ?>
「index.php」ファイルの中身を編集はこれで完了です。
手順2.「functions.php」ファイルを編集する
次は、「functions.php」ファイルを編集します。
「functions.php」ファイルに以下のコードを追記しましょう。
function sample_style_scripts() {
wp_enqueue_style( 'sample_style', get_template_directory_uri().'/style.css', array(), null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'sample_style_scripts' );
関数名(ここでは「sample_style_scripts」)とハンドル名(ここでは「sample_style」)は任意の名前で構いません。
作成した関数(sample_style_scripts())をフックに登録するために、以下のコードを記述しています。
add_action( 'wp_enqueue_scripts', 'sample_style_scripts' );
この記述がないと、フックに登録されないので、注意しいてください。
また同じ方法でjavascriptファイルをフックで読み込むことも可能です。
function sample_style_scripts() {
wp_enqueue_script( 'sample_js_script', get_template_directory_uri().'/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'sample_style_scripts' );
このように記述すれば、javascriptファイルをフックで読み込むことができます。
また、条件分岐で読み込ませることも可能です。
function if_sample_style_scripts() {
if(is_page('blog')){
wp_enqueue_style( 'if_sample_style', get_template_directory_uri().'/blog-style.css', array(), null, 'all' );
}
}
add_action( 'wp_enqueue_scripts', 'if_sample_style_scripts' );
このように記述した場合、「page-blog.php」のページに「blog-style.css」のスタイルが適用されます。
このようにif文で条件分岐することで、ページによって読み込むスタイルシートを区別することが可能です。
ファイルの分割・読み込み
WordPressでは、作成したファイルをヘッダー・フッター・サイドバーをテンプレートに分けて、外部ファイルとして読み込みます。
必ずこのようにしなけらばならないという訳ではありませんが、外部ファイルとして読み込むことで、コードの冗長化を防ぐことが可能です。
コードの冗長化を防ぐことで、メンテナンス性を高く保つことができます。
また、ヘッダー・フッター・サイドバーに変更があった場合、1つのファイルを修正するだけで全てのページに適用されるので、作業の効率化にも繋がります。
では、ファイルの分割・読み込み方法を紹介します。
手順1.それぞれのファイルを作成する
まずは、ヘッダー・フッター・サイドバーそれぞれのファイルを作成しましょう。
「header.php」、「footer.php」、「sidebar.php」を作成します。
手順2.コードを移す
次は該当部分のコードを移しましょう。
ヘッダー・フッター・サイドバーでそれぞれ共通しているコードの部分をそれぞれのファイルに移します。
共通部分は、制作しているサイトによって違うので、一概に指定することはできません。
それぞれのファイルで重複しているコードがあれば、該当するテンプレートに移しましょう。
手順3.外部ファイルを読み込む
続いて外部ファイルを読み込むコードを記述しましょう。
以下のようなコードでヘッダーを読み込むことが可能です。
<?php get_header(); ?>
以下のようなコードでフッターを読み込むことができます。
<?php get_footer(); ?>
以下のようなコードでサイドバーを読み込むことが可能です。
<?php get_sidebar(); ?>
上記のコードを記述することで、外部ファイルを読み込むことができます。
ウィジェット有効
ウィジェットを有効化して、表示させる方法を紹介します。
オリジナルテーマを作成する場合、特定コードを記述しなければウィジェットを有効化することはできません。
ウィジェットを有効化する手順を紹介します。
手順1.「functions.php」を編集する
function sample_widgets_sidebar(){
register_sidebar(array(
'name' => 'sidebar',
'id' => 'sidebar',
));
}
add_action('widgets_init','sample_widgets_sidebar');
関数名は任意のモノで構いません。
今回は、「sample_widgets_sidebar()」という名前にしています。
「name」は、管理画面で表示される名前です。
今回は、sidebarに表示されるので、「sidebar」という名前にしています。
「id」は、識別するためのIDです。
今回は、「sidebar」というidに指定しています。
このように記述することで、ウィジェットを有効化することが可能です。
手順2.ウィジェットを表示させる
次は、有効化したウィジェットを表示させましょう。
ウィジェットを表示させるためには、以下のコードを記述します。
<?php dynamic_sidebar('sidebar'); ?>
「dynamic_sidebar」の引数は、「function.php」で設定したIDまたは名前を入力します。
上記のコードで、ウィジェットを表示することが可能です。
このように記述した上で、管理画面の外観→ウィジェットを確認するとこのように表示されます。
このサイドバーに追加させたい、機能をドラッグ＆ドロップすることで機能を追加することが可能です。
サムネイルの表示
サムネイルの表示方法を説明します。
サムネイルを表示させるために「functions.php」ファイルを編集します。
「functions.php」ファイルに、以下のようなコードを追記しましょう。
function sample_setup(){
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'sample_setup' );
「add_theme_support」の関数に「post-thumbnails」を引数として渡す必要があります。
なので、サムネイルを表示させるために必要不可欠なコードです。
以下のコードは、サムネイルを表示させるためのコードです。
<?php the_post_thumbnail('thumbnail'); ?>
また下記のコードを追記することでサムネイル画像を自動的にリサイズすることができます。
add_image_size('sample-small-thumbnails', 600, 400);
以下のコードは、リサイズしたサムネイルを表示させるためのコードです。
<?php the_post_thumbnail('sample-small-thumbnails'); ?>
リサイズ以外にも、トリミングすることも可能です。
以下のコードを追記することでトリミングできます。
add_image_size( 'sample-big-thumbnails', 1200, 600, true );
以下のコードは、トリミングしたサムネイルを表示させるためのコードです。
<?php the_post_thumbnail('sample-big-thumbnails'); ?>
上記のようにコードを記述することで、サムネイルを表示させるだけでなく、リサイズ・トリミングすることが可能です。
カテゴリーの表示する
カテゴリーを表示させるためには、以下のようなコードを記述する必要があります。
<?php wp_list_categories( $args ); ?>
また、コードを追記することで「カテゴリーページへのリンクの有無」や「投稿数の表示/非表示」などを設定できます。
<?php
$args = array(
'orderby' => 'name',//設定した項目を基準に表示する(ID、name、slug、count、term_groupなど)
'order' => 'ASC',//昇順で表示する(降順の場合はDESC)
'style' => 'list',//カテゴリーのスタイル(listの場合は箇条書き、noneの場合は表示形式なし)
'show_count' => 0,//カテゴリーの表示/非表示(oの場合は非表示、1の場合は表示)
'hide_empty' => 0,//投稿のないカテゴリーの表示/非表示(oの場合は非表示、1の場合は表示)
'number' => null,//表示するカテゴリーの個数を設定する
);
wp_list_categories( $args );
?>
例えば、カテゴリー数の多いものから好きない順に上位20項目だけ表示する場合は、以下のように記述します。
<?php
$args = array(
'orderby' => 'count',//投稿数の順番
'order' => 'desc',//多いものから少ないものに表示する
'number' => 20//上位20種類を表示する
);
wp_list_categories( $args );
?>
参考URL:WordPressCodex日本語版
より詳しく知りたい方は、WordPressCodex日本語版を参考にしてください。
タグを表示する
以下のコードは、タグを表示させるためのコードです。
<?php the_tags( ); ?>
タグは上記のコードを記述するだけで、表示できます。
ページネーション
ページネーションを表示させる方法は、いくつもありますが今回はプラグインを使用した方法を紹介します。
今回使用するプラグインは、「WP-PageNavi」です。
「WP-PageNavi」を使用するために、まずはプラグインをインストールしましょう。
WordPreeの管理画面から「プラグイン」を選択します。
画面の右上に表示されている検索ウィンドウに「WP-PageNavi」と入力して検索します。
「WP-PageNavi」をインストールして、有効化しましょう。
ページネーションを表示させるために以下のコードを追記します。
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
ページネーションの設定するためには、WordPreeの管理画面から「設定」から「PageNavi」を選択します。
ここでページネーションの設定をおこないます。
このページで以下の項目を設定することが可能です。
・総ページ数の表示/非表示
・最初用のページ用のテキスト(デフォルトでは「« 先頭」と設定されています。「First」や「最初へ」などに変更することも可能です。)
・最後用のページ用のテキスト(デフォルトでは「最後 »」と設定されています。「Last」や「最後へ」などに変更することも可能です。)
・前のページ用テキスト(デフォルトでは「«」と設定されています。「Previous」や「前へ」などに変更することも可能です。)
・次のページ用テキスト(デフォルトでは「»」と設定されています。「Next」や「次へ」などに変更することも可能です。)
・pagenavi-css.cssを使用
「はい」と「いいえ」の選択肢があります。(デフォルトでは「はい」が設定されています。)
「いいえ」にすることでオリジナルのスタイルを適用することが可能です。
また、「WP PageNavi Style」というプラグインを使用することで簡単におしゃれなページネーションを実装することもできます。
・Page Navigationスタイル
「通常」と「ドロップダウンリスト」から選択できます。
・表示するページ数
表示されるページ数を設定できます。(デフォルトでは「5」に設定されています。)
「5」に設定した場合、「1、2、3、4、5…」と表示されます。
・省略するページ数
省略するページ数を設定します。(デフォルトでは「3」に設定されています。)
ここで指定された最大数まで省略表示をします。
また、「0」と入力することで無効にすることが可能です。
・省略ページを以下の倍数で表示
省略ページの倍数を指定できます。(デフォルトでは「10」に設定されています。)
「10」に設定した場合、「10、20、30、40」と表示されます。
「20」に設定した場合、「20、40、60、80」と表示されます。
FTPへの接続
WordPressを使用する上で欠かせないのがFTPです。
FTPとは、ファイル転送ソフトになります。
FTPを使用することで、簡単にファイルやフォルダをアップロードすることが可能です。
ここでは、Mac・Windowsの両方で使用できる「FileZila」を使って設定方法を説明します。
FileZilaURL:https://filezilla-project.org/
ファイルを起動して「新しいサイト」をクリックして設定します。
以下の項目は、このように設定してください。
プロトコル：「FTP-ファイル転送プロトコル」に設定します。
ホスト：ホスト名を入力します。ホスト名は使用しているレンタルサーバーに記載されています。
(エックスサーバーの場合は、「サーバーパネル」中の「FTPアカウント設定」の「FTPソフト設定」の「FTPサーバー(ホスト)名」です。)
暗号化：「FTP – ファイル転送プロトコル」に設定します。
ログオンタイプ：「通常」に設定します。
ユーザー：ユーザー名を入力します。ユーザー名は使用しているレンタルサーバーに記載されています。
(エックスサーバーの場合は、「サーバーパネル」中の「FTPアカウント設定」の「FTPソフト設定」の「ユーザー名(アカウント名)」です。)
パスワード：パスワードを入力します。パスワードは使用しているレンタルサーバーに記載されています。
(エックスサーバーの場合は、サーバーパネルのパスワードを入力します。)
これでFTPソフトの設定は完了です。
URLの書き換え
アップロードするためにはファイルに記載されているURLを変換することが必要です。
URLの書き換えに今回は、「Search Replace DB」というツールを使用します。
Search Replace DBダウンロードURL：https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
ダウンロードした「Search Replace DB」をFTPソフトを使用してアップロードします。
「設定したURL/Search-Replace-DB-master/」にアクセスしてください。
すると、このような画面が表示されます。
「search/replace」の欄に変換するuRLを入力します。
replaceの欄に「localhost:8888/設定したフォルダ名」を入力します。
withの欄に「https://取得したドメイン名」を入力。
次にdatabaseの欄を入力します。
・name:データーベース名
・user:データーベースの権限を持つユーザー
・pass:データーベースに接続するためのパスワード
・host:ホスト名
・port:ポート番号
上記の入力が完了したら、「update details」をクリックします。
次に「dry run」をクリックしてください。
「dry run」をクリックすると、変換される項目が表示されます。
変換される項目に問題がなければ、「live run」をクリックしてください。
「live run」をクリックすると、URLの変換が実行されます。
このような手順が完了すると、URLの置換が完了します。
まとめ
いかがでしたか？
初心者がつまずきやすいWordPressの箇所を紹介しました。
WordPressは、設定する箇所が多いので、初めて取り組む人はつまずきやすいと思います。
これからWordPressに取り組む人は、この記事を参考にてください。