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★ページごとに個別のCSSを読み込ませる方法★編集画面下にCSSを入力するエリアをつくる

WordPressはCSSを「style.css」に記述していくのが一般的な方法。 一つのファイルにまとめて書くとものすごい量になってしまうので、もっとスッキリさせたい! ページごとに読み込む方法はい …

WordPress4.7.3★子テーマの作り方(Twenty Seventeen の場合)

  子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下を作成する必要があります。  子 …

no image

MailPoet|購読者ページのカスタマイズ

ニュースレーターを配信できるプラグインを探していたらこの「MailPote」と「MailChimp」という2つのプラグインがダントツで使われていたので試してみた。 まずは一番人気のMailChimpだ …

Wordprss★Stinger8の子テーマの表示崩れ

インストールしているSTINGER8のバージョンが「STINGER8ver20170614」以降の場合は、子テーマの設定を2箇所だけ調整する必要があります。参考サイト:https://lifool.c …

WordPress★Crayon Syntax Highlighter プラグインのテーマが一覧できるサイト

    「Crayon Syntax Highlighte」は、コードをハイライト表示してくれる便利なプラグイン。 使っている人も多いのではないでしょうか。 とっても便利なプラグイ …

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