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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

CPIシェアードサーバーでWordPressが文字化けしたときの対処法

CPIのシェアードプランをご利用のクライアント案件でテストサイトにWordPressを直接インストールしてみたら、警告アラートがでてなかなか先に進めなかったので、対応策の覚え書き。 wp-includ …

WP★flamingoでダウンロードしたCSVを文字化けさせずにExcelで開く方法

flamingoからダウンロードしたCSVファイルは、文字コードがutf-8なので、エクセルで開くと100%文字化けします。Windowsのメモ帳で文字コードを変更して上書き保存すればOKなのですが、 …

WordPress★Gutenbergにカスタムブロックをつくる 1

Gutenbergになったら、「TinyMCE テンプレート」というテンプレートプラグインが使えなくなってしまいました。 あらかじめ設定したひな形を呼び出して使えるのでとても便利だったのに。。。 この …

WordPress★特定のページだけに「ある要素」を表示させたいとき

WordPressで、特定のページだけに「ある要素」を表示させたいときの テンプレートファイルへの書き方。 テンプレートファイル内の要素を表示させたい箇所に記述 要素のボリュームが少ない場合 =>テン …

WP★吹き出し風デザインをCSSだけでやる方法

ワードプレスでプラグインを使わずに、 HTMLとCSSだけで下のような感じの会話風レイアウトの作り方。   手順はこちら   [codepen_embed height=”400 …

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