WordPress plug-in(プラグイン)

Plug-in(プラグイン)とは?

WordPressの機能を拡張するためのツール

簡単にはWordPressをカスタマイズする為のプログラム!

このplug-inを使う事によって、初心者でもWEBサイトを好みに構築する事が出来ます。

様々なプラグインがありますので、自身のサイトに欲しいプラグインなどを使って見ると良いとは思いますが、テーマ、プラグイン同士の相性、プラグインの入れすぎなどにも気を使って行っていく様にしていきましょう。

3つのplug-in(プラグイン)!

まず使っておこうと思ったplug-inは3つ!

■Akismet Anti-Spam(アンチスパム)

問い合わせフォームでのスパムメールの対策になります。自動でスパムメールを振り分けてくれます。

WordPress公認のプラグインで初期の段階で入ってますので有効化しAkismet アカウントの手続きを行い取得したAPIキーを入力すれば設定が完了になります。

■Contact Form 7

問い合わせフォームを簡単に作成する事が出来ます。

Plug-inを検索からインストールし有効化。

固定ページにお問い合わせフォームを作成し、Contact Form 7のコンタクトフォーム1を編集しショートコードをコピーします。

固定ページのお問い合わせフォームの本文にショートコードをペースとすれば問い合わせフォームが出来ます。

■All in One SEO Pack

SEOの設定を簡単に出来るplug-inです。

これを設定しておけば検索エンジンからサイトを検索される様になります。

Plug-inを検索からインストールし有効化。

最低行っておきたいのが、ホームのディスクリプションが検索した際のホームページの詳細になるので説明文とホームキーワードは入力していきましょう。

GoogleAnalytics(グーグルアナリティクス)のトラックングコードを入力して紐ずけ。

XML sitemapを作成しsitemap.xmlをGoogle Search Console(グーグルサーチコンソール)からサイトマップを送信しインデックスを早めます。

3つのplug-inをインストールして設定しましたが、他にも使おうかなと思っているplug-inもあるのですが、とりあえずはこの3つにして先に進めて行こうかなと思います!

他にも良さそうなplug-inがあれば、今後ご紹介もしていきます。

3つのplug-inの設定の流れを簡潔に説明しているので、また細かい設定の詳細を書けたら別で書きますm( _ _ )m

WordPress子テーマ

子テーマを作ろう!

子テーマを作っておけば、使用しているWordPressのテーマがバージョンアップしてもせっかくカスタマイズしたものが無駄になりません。

まずは、CyberduckからFTPサーバに接続しkyouore→wp-content→themesに新規のディレクトリー(フォルダー)を作成→名前を使用する親テーマの名前-chidと付けると子テーマと分かりやすいです。

例) twentyseventeen-child

子テーマのディレクトリー(フォルダー)に入れるのは2つ。

・style.css

・functions.php

テキストエディターでタイトルをstyle.cssにしテキスト内に下記のコードを記載。

/*

 Template:twentyseventeen

 Theme Name:twentyseventeen-child

 Version:2.3

*/

Template:親テーマ名を記載

Theme 子テーマ名を記載

Version:の行はなくても大丈夫ですがバージョンアップした際に把握しやすいので記載しています。

同じくテキストエディターでタイトルをfunctions.phpにしテキスト内に下記のコードを記載。

<?php

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );

function theme_enqueue_styles() {

  wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

  wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’)

  );

}

?>

functions.phpの内容はこのままで触りません。

もしこれで反映されない場合は

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’, array( ‘parent-style’ ),
filemtime( get_theme_file_path( ‘style.css’ ) )
);
}

上記のコードはfilemtimeを追加(更新時にキャッシュをクリア)

この2つを作成したらCyberduckからFTPサーバに接続し子テーマのディレクトリー(フォルダー)の中にアップロードします。

WordPressの管理画面から外観テーマで作成した子テーマが表示されているので有効にします。

あとは子テーマの方にカスタマイズする場合は追加していく事により親テーマをベースに子テーマから書き換えられ変更していく事が可能になります。

子テーマ注意?!

以前は子テーマで@importを使っての親テーマのcssのスタイルを適用させる方法を使用しておりましたが、現在では@importを使用しない方法が推奨されているようです。

子テーマにfunctions.php入れて記載すると、親テーマテーマのCSSを読み込んでくれる方法が今は推奨されているようです。

テーマによっては子テーマを使わなくてもカスタマイズされたものが、バージョンアップ後も利用出来たりとかもあるので、必ずしも子テーマは必要という訳ではありません。

ちなみに失敗談として…

今回子テーマにstyle.css、functions.phpを入れてもなかなか子テーマが反映されず…

意味が分からなくてなっていたら…

テーマの子テーマが壊れている事に気づき( > < )

サイバーダックからディレクトリーやstyle cssなどを見直していると、大文字と小文字がゴッチャになってる所を発見!!!

小文字で直したらちゃんと反映してなんとか子テーマ作成も終了しました!

こんな事もあるので気をつけましょう!

ちなみに3時間位は格闘してました( T_ T)

WordPressインストールして…

無料のFTPソフトとテキストエディター

パソコンはMacを使っているので、Macで使えるソフトっと思い…

Cyberduck(サイバーダック)(無料FTPクライアントソフト)を使う事に、FTPサーバに接続してファイルをアップロード・ダウンロードすることが出来るクライアントソフトです。

WordPressの管理画面からも外観→テーマエディターからcssやphpを編集する事も出来ますし、ロリポップからもサーバーの管理・設定→ロリポップFTPからディレクトリ(フォルダー)作成やアップロード・ダウンロードも出来ます。

使いやすさと効率を考えてCyberduckをダウンロード!

ダウンロードしたらCyberduckを開いて新規接続をクリックします。

ロリポップにログインしてユーザー設定→アカウント情報から

FTPサーバー→サーバー

FTP・WebDAVアカウント→ユーザー名

FTP・WebDAVパスワード→パスワード

を入力すれば接続完了になります。

もう一つの無料ソフトが…

Me(ミ)(シンプルで使い易い無料テキストエディター)をインストール!

cssやphpを新規作成したりCyberduckでダウンロードしたcssやphpの編集をしアップロードする際に利用するシンプルなcssやphpの編集を行うテキストエディタになります。こちらはなくてもMac標準のテキストエディットでも使えますが、使いやすや優先でインストールしました。

この2つがあればWordPressのテーマの細かいカスタマイズが出来ます(なくても出来ることは出来ますが…)

WordPressテーマからの設定

そしてWordPressの土台となるテーマを決める事に…

最初は、Twenty Nineteenと言うデフォルトテーマを使用していましたが、1カラムに馴染めず、今使っているtwentyseventeenに変更!

twentyseventeenは2カラムなのでサイドバーがある方が使い易いのと、後々広告を貼る事を考えたら1カラムだと表示させにくいので2カラムにしました( ^ ^ )

で…

細かい設定

キャッチフレーズ空白

※テーマにもよりますがSEO不利になる場合があるので空白にしてます。

パーマリンク設定

クレジット表記(変更)

プロフィールページ作成

プライバシーポリシーページ作成

とこの辺の細かな説明はゆくゆくサイト作りの流れを作成した時に細かく説明して行きます、

そして子テーマを作成しようと思ったら…

WordPressとは?

WordPress(ワードプレス)

WordPressを使ってこのサイトをまずは作って見ました( ^ ^ )

で…

そのWordPressとはですが、オープンソースのブログソフトウェアでSEOにも強く個人法人問わず、商用利用も可能で世界でも最も利用されているコンテンツ管理システムです。

まっ…

簡単に説明するとホームページ作成ソフトみたいな感じです。

テンプレートを使って簡単に作成し運用する事も出来ますし、スキルがあれば細部までカスタマイズする事も可能です!

プログラミングが出来なくてもプラグインを使ってサイトを構築する事が出来るので専門的な知識も必要なく初心者でも簡単に出来ます。

簡単にとは言いましたが、多少の知識は必要にもなって来ますので、多少の努力と勉強は必要になります。ただサイト作りに興味がある方なら自然と覚えては行くとは思います。

WordPress簡単インストール

ロリポップを利用しておりますのでロリポップでの流れにはなりますが、ロリポップにログインしてサイト作成ツール→WordPress簡単インストール。

サイトのURLを指定(自身のサイトに利用する独自ドメイン)その横に/(スラッシュ)で「入力は任意です」と表示されているボックスがありますが空にしておくと複数サイトを作成した際に混同してゴチャゴチャになるので入力しておきます。

サイト毎にディレクトリ(フォルダー)で分けていると管理がしやすくなります。

分かりやすいようにドメイン名を入力すると良いと思います。

例) サイトURL http://kyouore.com   /   kyouore

するとkyouoreというディレクトリ(フォルダーに)WordPressの http://kyouore.com のデータが全て入りますので複数のサイトを作成した際にこのサイトのデータはここにあると分かりやすくなります。

利用データベースはそのままで大丈夫です。

あとは

サイトのタイトル

ユーザー名

パスワード

パスワード(確認)

メールアドレス

プライバシーはチェックしたまま検索エンジンによるサイトへのインデックスを許可するにしておきましょう。(例外で自分しか見ない用の特殊な場合は検索されないようにチェックを外しましょう)

ユーザー名、パスワードはWordPressのログインパスになります。

メールアドレスはサイト用のフリーメールを1つ作って複数サイトを作った際にも1つにまとめておいても良いと思います。

最後に入力内容の確認→承諾するにチェック→インストールでWordPressのインストール完了になります。

細かいサイトの作成手順は別記事で後ほど作ろうとは思ってますので、ご参考にして下さいm( _ _ )m

継続は力なり?!

Webサイト作りに必要な物

1 パソコン

2 ドメイン

3 サーバー

最低限この3つは必ず必要になって来ます。

パソコンに関してはMac Bookを持っていて、ドメインも実は前に契約していたのが自動更新でそのまま数個持っていましたので。あとはレンタルサーバーが必要になって来ます。

ブログを単純に作るのであれば無料ブログサービスも沢山あるので、そちらを使う方法もありますが長い目でサイト運用を行っていきたいので独自ドメインとレンタルサーバーを使ってWordPressを使う方法を選びます。

ゆくゆくの収益化を考えるのであれば、単純に検索エンジンからの評価がされやすいからです!

無料ブログはデメリットが多く、趣味でブログをする位なら良いと思いますが、収益化を考えると利用する無料ブログによってアフェリエイトが出来なかったりの縛りや、アカウント停止やサービス終了のリスクもあり個人の財産となりずらいからです。

と言うわけでレンタルサーバーを契約する事に!

ロリポップとムームードメイン

レンタルサーバーに関しては、ロリポップを使う事にしました。

理由は料金が安いのと、WordPressのインストールも簡単でムームードメインと同じ会社のGMOペパボで以前も使っていた為使いやすいからです。

契約した内容はライトプランで月額250円で容量50GB!(50GBも容量があれば十分な量なので)

年間で3,000円ですが、初回の契約料が必要になるので4,950円!(一年分)

ドメインは前に持っててたのを使用でムムードメインで月額1,480円!

初回だともう少し安く購入する事が出来ます。

人気のドメイン(.com、,net)などは購入時期にもよりますがだいたい初回で1,160円前後位です。

そこから1年毎に更新で年間1,480円前後位!

だいたいにしているのはドメインによって料金が様々だからです。

注意して欲しいのが初回が100円位で購入出来るドメインもありますが、あくまで初回の1年だけであり継続利用すると更新で年間1,480円以上で高いとこで3,000円~4,000円にもなりますので気をつけて下さい。

購入する前に取得するドメインのサイトから価格表を確認して2年目からの料金はチェックしておいた方が良いと思います。

Adobe Photoshop

無料の写真加工アプリを探していたのですが、なかなかいいのが見つからず…

結局Adobe Creative CloudのPhotoshop(フォトショップ)を契約!

本当はIllustrator(イラストレーター)、Dreamweaver(ドリームウエーバー)も使いたかったのですが3つを使うと月額5,680円は高い過ぎるやろっと思い、そんなに本格的に使う訳でも使える訳でもないので…

って事で月額980円のPhotoshopのみにしましたが、年間11,760円!

う~ん( > < )

高いな…

基本はサイズの変更と画像を軽くするのが目的なんだけどPhotoshopいるかな?!

と心の中で思いつつ…

他で使い易くて代用できるのあったら変更しよ…

思ったよりお金掛かってしまったので…

次のサイトからドメインは100円位のにしとこかな…

なんやかんやで日々前進( > < )