WordPressのオリジナルテーマ-骨組み・機能追加


基本部分のコーディング

作ったデザインをもとにHTMLとCSSでコーディングします。自分は「ringo」をテーマ名としてフォルダを作り、トップページを 「index.html」 で、スタイルシートは 「style.css」 というファイル名にしておきました。自分はAtomを使用してコーディングをしました。

詳しくはこのサイト(http://stocker.jp/diary/wordpress-tutorial/)にあります。

ここまでは参考にしたサイトとサイトとほぼ同じです。
違うのはロゴ画像を前の記事で紹介したものにしたことと、タイトルやコピーライト部分です。

次にサイトにあるように、「index.html」をphpファイルとして切り分けていきます。
そして、できたテーマフォルダをwordpress フォルダ内の「wp-content/themes/」の中に入れました。そしたらWordPressの管理画面のテーマに自作のテーマが表示されます。
フォルダの場所がわかりにくいかもしれませんが、自分は「PC」→「ダウンロードしたドライブ」→「ユーザー」→「PCのユーザー名」→「Local Sites」→「サイト名」→「app」→「public」→「wp-content」→「themes」と辿っていって見つけました。

次にサイトに欲しい機能を追加していきます。

ヘッダーにメニュー設置

ヘッダー部にカスタムメニューを設置します。(参考サイトhttp://wordpress.hitsuji.me/add-custom-menu/)これでWordPressの管理画面でメニューを作成することが可能となります。

ヘッダーメニューへの検索フォーム設置

次にメニューに検索フォームを追加します。
WordPressの管理画面では、サイドバーにデフォルトで検索フォームが入っています。
しかし、ヘッダーメニューに検索フォームを追加することはできないのでテーマファイルに書き込んでいきます。
デフォルトの検索フォームを少しいじりたかったので、検索フォーム用のphpファイルの「searchform.php」を自分のテーマファイルに作成しました。以下がコードです。


placeholder
で検索ボックスの中に表示する文字を指定し、検索ボタンをFontAwesomeのアイコンに変更しています(<i class=”fa fa-search”>の部分)。
FontAwesomeを利用するために公式サイト(https://fontawesome.com/start)からCDNのためのコードをコピーして、「header.php」のheadタグ内に埋め込みました。

次に「function.php」を編集します。以下のコードを追加します。

最後にstyle.cssで検索フォームの大きさ、位置、色などを設定します。自分はこのように設定してこうなりました。

検索フォーム
検索フォーム

 

検索結果一覧の設定

次に検索結果の表示用に「search.php」を作成します。以下のコードをコピーしてファイルを作成後、テーマフォルダに上げます。

 

これで検索に用いたキーワードと件数、結果がない場合のメッセージが表示されるようになります。

Twitterのサイドバーへの埋め込み(プラグインなし)

基本的にはサイドバーにTwitter埋め込み用のスペースを作って、埋め込みコード生成用のサイトで大きさを設定して生成したコードを貼り付けるだけです。
参考サイトはこちら(https://behappier-miki.com/twitter-sidebar)。

コメント欄の設置

コメント欄を作ります。自分はトップの一覧にはコメントについての情報を出すつもりはなく、単一の投稿記事ページでのみコメント欄を出したかったので、「single.php」のみにコメント欄を表示するコードを追加しました。
参考サイト(http://blog.dododori.com/create/program/wordpress-comment/)

固定ページとほかの記事一覧ページの作成

固定ページ用のphpファイルの「page.php」を作ります。基本的には「single.php」と同じで、コメント欄や投稿日時などいらない部分を削ります。

次にそれぞれの月、カテゴリー、タグの記事一覧を表示する「archive.php」、「category.php」、「tag.php」を作ります。
コードは「index.php」を参考にして何の一覧かを表示するコードをそれぞれ追加していきます。以下は「archive.php」のコードです。

何の一覧かを表示する<main>下の
<p>「<?php echo get_the_date(‘Y年n月’); ?>」の記事一覧</p>
をそれぞれのファイルに合わせて、
<p>「<?php single_cat_title(); ?>」カテゴリー記事一覧</p>
<p>「<?php single_cat_title(); ?>」タグ記事一覧</p>
に変更してあります。

パンくずリストの設置(プラグインなし)

次は自分がどの階層のページにいるかを表すパンくずリストをプラグインなしで作ります。
参考にしたのは次のサイトです(https://cotodama.co/wordpress_breadcrumb/)。

個別記事用ページ送りの設置

次に個別記事用のページ送りを追加します。記事の下に「次の記事」、「HOME」、「前の記事」を表示させます。
参考サイト(http://yudnaliatah.com/wp-single-post-pagenavi-2377)

記事一覧用ページ送りの設置

次にカテゴリーなどの記事一覧のページ送りを追加します。
参考サイト(https://web-ashibi.net/archives/971)

記事抜粋の[…]を「続きの読む」リンクにする

記事一覧の抜粋文末の[…]を別の文字に変更し、記事へのリンクを追加します。
参考サイト(https://qiita.com/gatespace/items/61e40a5bdb30a4f80a83)

記事一覧にアイキャッチ画像設定

アイキャッチ画像を表示させます。まず「functions.php」に以下のコードを追加します。

次に「index.php」、「search.php」、「archive.php」、「category.php」、「tag.php」のアイキャッチ画像を表示させたいところに以下のコードを追加します。(代替画像用URLは環境により違います)
参考サイト(http://wordpress.hitsuji.me/show-thumbnails/)

ここで扱いにくかったため、「search.php」の記事概要表示部分のコードを他と同じ「index.php」と同じものに書き換えました。これでcssでまとめてデザインが可能になりました。以下のコードが変更後です。

タグの表示

次に個別の投稿記事ページの下にタグも表示させます。
以下のコードを「single.php」のタグを表示させたいところに貼り付けます。(<i class=”fa fa-tags”></i>はFontAwesomeのタグのアイコン)

 

TOPへ戻るボタンの設置

次にプラグインなしでTOPへ戻るボタンを追加します。自分は「footer.php」へのコードにFontAwesomeの上矢印のアイコンを追加しました。
参考サイト(https://naokixtechnology.net/wordpress/1103)

topボタン

 

レスポンシブデザインにする

次にレスポンシブデザインにしてスマホ画面に対応させます。属性値が自分のテーマと違って理解して修正するのに手間取りました。
参考サイト(https://plusers.net/wordpress_theme_2)

ソーシャルボタンをプラグインなしで設置しようとしましたが、自分も今まで一度も使ったことがないのを思い起こしやめました。
自分のサイトでは軽量化にもつながるので無しにします。
ちなみにソーシャルボタンの自作方法は検索すればコード付きで教えてくれるサイトが結構あります。

ここまで読んだらわかるように、オリジナルテーマと言ってもほぼ先人が作ってくれたひな形を自分の好きなように組み合わせたものです。
ここにない機能も調べれば丁寧に解説してくれている人がいるでしょう。
なのでやってみたい人は物怖じせずにとりあえずできそうなところから手を付けるのをお勧めします。

2019-04-23

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

TOP