WordPress

WPテーマカスタマイズ★「Emanon Free」編 vol. 1

投稿日:2019年9月18日 更新日:

テーマの入手方法

このテーマは、テーマの作者が運営する公式サイトからダウンロードして入手します。

emanon free 公式サイト

テーマをダウンロードするには、メールアドレスの登録が必要です。
登録すると、ダウンロードアドレスが届きます。
ありがたいことに、ダウンロードファイルは、子テーマまで用意してあるります。

「emanon free」(テーマファイル本体)と「emanon free child」(子テーマ)の2つのテーマを有効化するだけで、すぐにカスタマイズが始められます!

head内にfunctions.phpを使ってjsやcssを追加する方法

ワードプレスのテーマを作るときに必ず書いておかないと行けないコードが[wp_head()]という関数。これは、ヘッダー内にコードを出力するものなんです。

吐き出しているファイルは「/wp-includes/default-filteres.php」になります。
でも、ここをカスタマイズしてしまうと、ワードプレスのバージョンアップがあったときに、新しいファイルに書き換えられてしまうので、バージョンアップの影響を受けないように、子テーマのfunctions.phpで設定します。

関数の形式はこれ。

/**  まず、表示したい関数を制作。 */
function teststyle(){
    echo "<link href='css/test.css' rel='stylesheet' type='text/css' />";
}
/** それを反映させるためにフック */
add_action('wp_head', 'teststyle');

今回は、最新版のfontawsomeを使うためのjsを追加しました。
fontawsomeはバージョンがあって、cssで「fas」あり「fas」なしがあります。
新しいバージョンには「fas」がつきます。

例)<i class=”fas fa-home”></I>

これでうまく表示されない場合は、古いバージョンにします。

例)<i class=”fa-home”></I>

と「fas」を削除すると表示されるようになります。

話を戻して。。。
新しいアイコンフォントで表示されないものがあったので、fontawsoneを最新版にします。
最新版はjsをリンクさせるだけ。とっても簡単になりました。
fontawsomeに登録すると自分のKitをもらえます。(無料)
下のコードを子テーマのfanctions.phpに追加します。

// FontAwesome アイコンフォントを利用できるようにする
function add_wp_meta_tag() {
    echo '<script src="https://kit.fontawesome.com/自分のkit名.js"></script>';
}

// add_actionにてwp_headの動作にadd_wp_meta_tagの処理を追加
add_action('wp_head', 'add_wp_meta_tag');

これで、ヘッダー内にfontawsomeのjsのリンクを書き出すようになります。

 

パーマリンクとURLスラッグ

SEOの観点からいうと、
サイトURL/投稿名(記事タイトル)
がベストらしい。

「サイトURL/カテゴリ名/投稿名」でもOKだけど、途中でカテゴリ名を変更したり、カテゴリ構造を変えたくなったときに、そのカテゴリに属する全投稿のパーマリンクが変更されてしまいます。そうすると、それぞれのリンクについているソーシャルボタンの数字もリセットされてしまいます。

パーマリンクというのは、一度設定したら後から変更するのが難しく、変更しないのが基本です。

もうひとつ注意点、投稿名が日本語の場合は記事ごとに英語URLスラッグを設定すべし。
たいていの場合は記事タイトルは日本語。なので、記事ごとに英文のタイトルをつけるようにしておきます。このひと手間が、SEO的に強いサイト構造になっていくのです。

 

コピーライトを編集する

footer.phpを編集します。
でも、今回は子テーマを使っているので、親テーマのfooter.phpを複製して子テーマフォルダに入れてから、子テーマのfooter.phpを編集していきます。

◎編集するファイルの場所:
wp-content > theme > emaono free child > footer.php

◎削除するコード:
<?php emanon_footer_copy(); ?>

ここで、いったんファイルを保存して、コピーライトが消えているかどうか確認。
ちゃんと消えてれば、自分のサイト情報をいれたコピーライトを追加します。

◎追加するコード:
<div class=”copyright”>
<small>©<a href=”サイトURL”>サイト名</a></small>
</div>

 

無料版テーマファイルを直接編集することは、WordPressのガイドラインに基づき、ライセンス上は問題ありませんが、エラーがでたり、分からないことがあったとしても、公式サイトに問い合わせても対応してもらえませんので、あくまでも自己責任で行ってください。

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WordPress

執筆者:


comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WordPress|twenty seventeen カスタマイズ準備|子テーマをつくる

デフォルトのテーマ「twenty seventeen」をカスタマイズする前の準備 テーマをカスタマイズするには、元になるテーマの子テーマを作り、その子テーマを改造していきます。元のテーマは変更しないよ …

WordPress★「Search-Replace」で「The table “wp_ewwwio_queue” has no primary key.」っていうエラーがでたときの対処法

データベースの置換スクリプト「Search Replace」を実行する際に、事前テストでチェックするのがお約束。いつもはなにも問題がないのだけれど、「dry run」ボタンを押してテストすると、エラー …

WP★ContactForm7 送信後に異なる URL にリダイレクトさせる

Contact Form 7 プラグインでお問い合わせや申し込みフォームを作成すると、送信完了後にメッセージが出るだけで完了ページには遷移しません。 メッセージだけだと、送信が完了したことに気付かずに …

WordPress★Gutenberg 投稿ページでテンプレートを使えるようにする

「TinyMCE テンプレート」の代わりにGutenbergで記事のひな形を使う方法を調べていて、カスタムブロックを追加する方法を見つけたけれど、かなりハードルが高い。。。 でも、もっと簡単な方法があ …

WordPress★FaceBookページをサイトに埋め込む【2020年版】

facebook for developers ページプラグインはコチラ ページに遷移すると、下のような画面になります。 「FaceBookぺージのURL」の箇所に、埋め込みたいページのURLを貼り付 …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。