子テーマを作るプラグイン「Child Theme Configurator」のご紹介

WordPress初心者には敷居の高い、子テーマを簡単に作成してくれるプラグイン「Child Theme Configurator」のご紹介です。

子テーマとは

WordPressでは、有料・無料のテーマを導入することによって、ホームページのデザインやレイアウトを簡単に変えることができます。

ただし、WoredPressのアップデートや不具合の修正などで、テーマの更新をするようにお知らせが来ることがあります。

そのままの状態(親テーマのまま)で更新してしまうと、そのテーマに加えた追加CSSやfunctions.phpなどを書き換えている場合、すべて上書きされてしまい、カスタマイズした部分が消えてしまいます。

テーマの更新をしてもカスタマイズ部分を残すためには、子テーマというものを作る必要があります。

通常、子テーマ用のファイルを作り、FTPソフトなどを使ってアップロードするという作業が必要なのですが、初心者の方やファイル操作に慣れていない人にとっては、なかなかハードルが高いですよね。

「Child Theme Configurator」というプラグインを使えば、初心者でも簡単に子テーマを作れますので、大変お勧めです。

しかも、通常子テーマというと、function.php と style.css だけですが、「Child Theme Configurator」プラグインを使えば、header.php や footer.php など、その他のテンプレートファイルも親テーマからコピーして子テーマ化することができます。

「Child Theme Configurator」のインストール

Child Theme Configurator

ダッシュボード「プラグイン」>「新規追加」から、「Child Theme Configurator」を検索して、「今すぐインストール」、有効化してください。

子テーマの作成

ダッシュボード「ツール」>「Child Themes」をクリックして、「Child Theme Configurator」の設定画面に移行します。

1項目め「Select an action:」で、「CREATE a new Child Theme」がチェックされていることを確認して、2項目めの「Select a Child Theme:」で、作成したい親テーマを選択して、「Analyze」をクリックしてください。

そのまま下の方に画面をスクロールさせて一番下、9項目め「Click to run the Configurator:」の「Create New Child Theme」をクリックすると子テーマが作成されます。

子テーマの有効化

作成した子テーマを使うためには、子テーマを有効化する必要があります。

ダッシュボード「外観」>「テーマ」から、作成した子テーマ「(親テーマ名) Child」の「有効化」をクリックしてください。これで、親テーマの更新をしても、子テーマに施したカスタマイズは消えずに残ります。

親テーマのカスタマイズを引き継ぎたい場合

ホームページを作り始めの最初から子テーマを作成していればいいですが、子テーマを作らずにホームページを制作・カスタマイズを進めて行って、後からしまった!と思うことがあります。

そんな時でも、「Child Theme Configurator」を使えば、親テーマで施したカスタマイズを引き継いで子テーマを作成することができます。

子テーマの作成の際に設定項目の8項目め「Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme:」にチェックを入れて、子テーマを作成すれば、親テーマのカスタマイズが引き継がれます。

header.phpやfooter.phpなどの子テーマを作成する

子テーマを作成すると、「style.css」と「functions.php」が作成され、ダッシュボード「外観」>「テーマエディター」から、ファイルの追記・修正をすることができます。

ただ、カスタマイズによっては、header.phpやfooter.phpなども編集したい場合があります。これも親テーマに直接変更を記述したものは、テーマの更新の際に消えてしまいます。

これらの親テーマのphpファイルも「Child Theme Configurator」を使えば、簡単に子テーマにコピーすることができます。

「Child Theme Configurator」の設定画面の上部「Files」タブをクリック、子テーマに追加したいファイルにチェックを入れて、「Copy Selected to Child Theme」をクリックしてください。

まとめ

簡単に子テーマを作成できるプラグイン「Child Theme Configurator」を使えば、FTP情報がわからなくても、子テーマの作成、子テーマに親テーマのテンプレートファイルをコピーすることができ、大変重宝します。子テーマを作成するプラグインは他にもありますが、親テーマのカスタマイズ情報を引き継げたり、「functions.php」以外のファイルも子テーマ化出来たり、機能的にも「Child Theme Configurator」が自分が使った中では一番のおススメです。

ページ内リンク【スムーズスクロール】プラグインーEasy Smooth Scroll Linksのご紹介

よくページ内のリンクをクリックするとスルスルッとスクロールするホームページがあると思います。

リンクをクリックして、パッと切り替わるより、スクロールした方がそのページ内のリンクだということがわかりやすく親切ですよね。

テーマによっては、もともとスクロールしてくれるものもありますが、基本WordPressの標準ではこの機能はありません。

今回ご紹介する、WordPressのプラグイン「Easy Smooth Scroll Links」をインストールすることによって、簡単にスクロール機能を使うことができます。

Easy Smooth Scroll Links のインストール

ダッシュボードから「プラグイン → 新規追加」をクリックし、検索で「Easy Smooth Scroll Links」と検索しましょう。

検索後、「Easy Smooth Scroll Links」 の今すぐインストールをクリック、有効化をクリックしてください。

Easy Smooth Scroll Linksの設定

ダッシュボード左側「設定」>「Easy Smooth Scroll Links」をクリックしてください。

設定画面になりますので、

Scroll Speed ・・・ スクロールスピード(規定値900)小さい方が速い

Offset    ・・・ オフセット、スクロール完了した時の表示場所の調整(規定値20)

Scrolling Animation Effects ・・・ スクロールアニメーションの選択(規定EaseInQuint)

を設定して「Save Setting」で保存してください。

オフセットは、例えばヘッダーを上部に固定していて、アンカーリンクした先の見出しが隠れてしまうときなどに役に立ちます。ここの数値を150とか200に変えると固定ヘッダーでも丁度良いところで止まってくれます!

スクロールアニメーションの選択肢は沢山ありますが、これはイージング関数と呼ばれているもので、動きはじめがゆっくりで終わりが速いとか、動きに変化を付けられます。

こちらにイージング関数に関して詳しい情報がありましたのでご参考にしてください。

https://easings.net/ja(イージング関数チートシート)

規定値のEaseInQuintだと、最後にびゅっと速くなるので、好みの問題ですが、個人的にはeaseInOutSineあたりが良いのではないかと思います。間違っても、選択肢の最初にあるeaseInBounceはやめた方が良いかと思います…。

まとめ

ページ内リンクからアンカーまでスムーズにスクロールしてくれるプラグイン「Easy Smooth Scroll Links」のご紹介でした。

これがあると無いとでは、ユーザーに与える印象も変わってくると思うので、ページ内リンクを多用しているホームページで、テーマにこの機能が付いていない場合には、こちらのプラグイン「Easy Smooth Scroll Links」は大変おススメです。

こちらのリンクでお確かめ下さい→ ページ上部に戻る

ホームページをhttpからhttpsに変える方法【SSL化(暗号化)設定】

ホームページを閲覧したときにブラウザのURLが表示されるところに「保護されていない通信」と書かれているのを見たことがあると思います。

このように表示されていても、ホームページ自体は問題なく見られるのですが、何となく心配になってしまいますよね。

この「保護されていない通信」となってしまうのは、サイトがSSL化されていないからです。

SSL(暗号化)とは

SSLとはサーバーとユーザーとの間のインターネット上の通信を暗号化する技術です。
インターネット上のデータ通信は、そのままだと何者かによって盗み見られたり、改ざんされる危険性があります。

ホームページをSSL化(暗号化)することによって、データ通信が暗号化され、より安全にやり取りすることができるようになります。

最近では、SSL対応の有無が検索順位にも影響してくるため、以前よりも増してサイトのSSL化は重要になってきております。

SSL対応にはお金がかかる?

有料のSSL証明書を発行してもらうという方法もありますが、メジャーなレンタルサーバーなら、ほとんどのところで、無料でSSL設定できるサービスを行っています。

もちろん、有料の方がより信頼度が高いかもしれませんが、手続きが面倒だったり、毎年コストがかかってきますので、大企業やネットショップ以外の中小企業や個人のお店のホームページでは、無料のSSLで十分かと思います。

無料SSL設定の方法

WordPressサイトの無料SSL設定のながれとして、

  1. サーバー会社のコントロールパネルで「無料SSL設定」をしてSSL証明書を取得
  2. 設定が反映されるまで待つ
  3. WordPressの管理画面から、URLをhttpからhttpsに書き換えるか、「Really Simple SSL」プラグインなどをインストールする

まず、1のサーバー側で設定をして無料SSLが使える状態にする必要があります。
これをやらないで3の書き換えをやってしまうと、ホームページにアクセスすらできない状態になってしまうので要注意です!

サーバー側のSSL設定

サーバー側の無料SSL設定の方法は、レンタルサーバー会社によってそれぞれやり方が違うので、詳しくはご使用のサーバー会社のマニュアルなど検索し参考にしてください。
ここでは、エックスサーバーの無料SSL設定の方法についてご案内します。

エックスサーバーの場合、サーバーパネルにログインし、「ドメイン」の「SSL設定」をクリック、

「独自SSL設定追加」に設定したいドメインを追加すればOKです。(エックスサーバーの場合、ドメインの登録時に無料SSL設定を同時に申し込むこともできます)

あとは1時間ほど待って設定が反映されているのを確認して、WordPress側の設定に進んでください。

WordPress側のSSL設定

WordPressの管理画面にログインし、「設定」>「一般」から、WordPressアドレス(URL)、サイトアドレス(URL)を「http://(ドメイン)」から「https://(ドメイン)」に書き換えて「変更を保存」をクリックします。

次に内部リンクや画像URLが、http://から始まっていたものをすべてhttps://に書き換える必要があります。これをすべて抜かりなく書き換えたら、http://でアクセスされたものをhttps://にリダイレクトする設定をします。これには、.htaccessというファイルを書き換える方法やプラグインを使う方法があります。

なんだか難しそうですよね、そんな人のために簡単にSSL設定できるプラグインもあります。

「Really Simple SSL」プラグインを使ってSSL化する方法

「Really Simple SSL」プラグインを使えば、煩わしい作業を省略してSSL設定ができます。

WordPress管理画面左側「プラグイン」>「新規追加」から、「Really Simple SSL」を検索し、インストール、有効化してください。

あとは設定で、301 .htaccess転送を有効化にチェックし、保存すればOKです。

あとは、ブラウザでホームページを表示させてみて、すべてのページで上部のURLに鍵マークがついていればOKです。

もし、鍵マークがついていないページがあったら、一部でhttp://のファイルが含まれているはずなので、手動で内部リンクや画像URLがhttp://のままになっているものをhttps://に書き換えてください。

SSL設定まとめ

以上、SEO対策とユーザーに安心感を与えるためにも、少しの手間と無料でSSL設定できますので、まだhttp://のままの方は是非やった方が良いかと思います。

また、サーバー選びでしたら、簡単に無料で独自SSL設定できるエックスサーバーがお勧めです。

【WordPressお勧めのプラグイン】スライドショー・スライダー設置プラグイン「Smart Slider 3」の使い方

画面幅いっぱいのヘッダースライダーがあるホームページってよく見かけると思います。WordPressでは、専門知識がなくてもテーマ・テンプレートを選べば、本格的なホームページを作成することができます。

テーマによっては、あらかじめヘッダースライダーが備わっているものもありますが、どうしても今一つ物足りなかったり、そもそもヘッダースライダー機能がないものも多いです。

そんなとき使えるのが、こちらも専門知識がなくても追加できるプラグインです。

便利なスライドショー・スライダー設置プラグインはたくさんありますが、その中でも無料で使えて高性能なスライダープラグイン「Smart Slider 3」のご紹介をさせていただきます。

「Smart Slider 3」のインストール

WordPressの管理画面の「プラグイン」>「新規追加」をクリックして、プラグインの検索窓に「Smart Slider 3」と入力してください。

「Smart Slider 3」プラグインが見つかったら、「今すぐインストール」をクリック、さらに「有効化」してください。

お使いのPHPのバージョンが古い場合、インストールできない場合があります。その際は、PHPのバージョンアップが必要になります。

「Smart Slider 3」の使い方

ダッシュボードに「smart Slider」の項目が増えていますので、こちらをクリック、さらに「GO TO DASHBOARD」をクリックします

スマートスライダーのダッシュボード上の「NEW PROJECT」をクリックし、さらに「Create a New Project」をクリック、Project Type、Slider Type 、Settingsなどの項目がありますが、とりあえずこのまま「CREATE」をクリックしてください。

スライドの追加

次に「ADD SLIDE」から、スライダーで使いたいスライド画像やページなどを選んでください。
スマートスライダーでは、画像だけでなく固定ページや投稿ページもスライドにすることができます。

  • Image ・・・・・・ 画像
  • Blank ・・・・・・ 単色背景
  • Post  ・・・・・・ 固定ページや投稿ページ
  • Static Overlay  ・・ スライド画像が変わっても変わらないテキスト
  • Dynamic Slides ・・ 動的に投稿記事をスライドにしてくれる

さらにこれらのスライド上にテキストやボタンなどを載せることができますので、無料バージョンでもかなり高度なことができます。

スライダーの設定

設定項目もたくさんあるので事細かにカスタマイズすることができます。

ですが、逆に有り過ぎなくらいなので、よく使うところ要点だけ押さえておけばよろしいかと思います。

  • General ・・・・・ 固定ページなどに貼り付けるショートコードをコピーする
  • Size   ・・・・・ サイズを指定する。Full Widthにすれば画面幅いっぱいのスライドショーになる
  • Controls ・・・・・ 次のスライドに送る矢印などの設定。「Bullet」を有効化するとスライドの下の方に今何番目のスライドかわかるドットが表示されるのでお勧め。あと、サムネイルなどの設定もできる。
  • Animations ・・・ スライドの変わり方のパターンを変えることができる。
  • Autoplay  ・・・・ 自動で次のスライドに移るかの設定。
  • Optimize  ・・・・ 画像を最適化するかの設定
  • (以下省略)

スライダーの表示方法

完成したスライダーを固定ページや投稿ページに表示させるには、ページの編集画面で、先ほどのGeneralにあったショートコードをコピペするか、ブロックの追加で「Smart Slider 3」を選択・追加すれば簡単に挿入することができます。

トップページのヘッダーにスライダーを表示させたい場合は、header.phpにGeneralに載っていたPHPコードを追加するか、ページの編集画面でトップページの最初に追加すればOKです。ただし、ヘッダー部分(ロゴやグローバルメニュー)と間隔が空いてしまう場合があるので、追加CSSで調整が必要です。

「Smart Slider 3」の使用例

こちらは「Smart Slider 3」を使ってブログ投稿記事をスライドショーにしたものです。

スライドの選択でページを選択すれば、記事タイトルや本文の抜粋、リンクボタンも自動的に表示されます。

お勧めのレンタルサーバーについて

こちらは格安ホームページ制作のEM Web Createです。スキルマーケット・ココナラで、WordPressの無料テーマをカスタマイズしてのホームページ制作を承っております。 ご依頼者の方から、お勧めのサーバーは何です […]

サーバーとドメインについて

格安ホームページ制作のEM Web Createです。スキルマーケット・ココナラでWordPressを使ったホームページ制作を承っております。 WordPressサイトを作成する際には、FC2ブログやアメブロ、無料のホー […]

WordPress超入門 - ワードプレスサイトの作り方 基礎の基礎 

ホームページを自分で作成しようと思って、サーバー・ドメインを契約して、WordPressをインストールしてみたものの、どうやって作ったらいいのか途方に暮れている方もいるかもしれません。 ここでは、まったくの初心者の方向け […]

【WordPress】初心者でも簡単、ブログ投稿の書き方

WordPressでは、HTMLなどのウェブの知識が無くても、簡単にブログ投稿ページの更新をすることができます。その投稿ページの書き方をご案内します。 Contents1 まずはWordPress管理画面にログイン2 ブ […]

previous arrow
next arrow
Slider

以上のように無料でこれだけ十分すぎるくらい使える「Smart Slider 3」は、ホームページにスライドショーを使いたいという方には本当にお勧めです。

【WordPressプラグイン】文字などをふわっと表示させるお勧めのプラグインBlocks Animation

よくホームページで、スクロールに合わせて文字などがフワッと現れるのを見たことがあると思いますが、WordPressサイトなら無料のプラグインをインストールすることによって、難しいJavaScriptなどを記述しなくてもこのようなアニメーションを表現することができます。

今回は、ブロックエディタでブロック単位でアニメーションを設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」を紹介させていただきます。

「Blocks Animation: CSS Animations for Gutenberg Blocks」のインストール

WordPressの管理画面の「プラグイン」>「新規追加」をクリックして、プラグインの検索窓に「Blocks Animation」と入力してください。

「Blocks Animation: CSS Animations for Gutenberg Blocks」プラグインが見つかったら、「今すぐインストール」をクリック、さらに「有効化」してください。

「Blocks Animation: CSS Animations for Gutenberg Blocks」の使い方

「Block Animation」が有効化されていると、投稿ページや固定ページの記事編集画面での右側に「Animations」という項目が追加されています。

あらかじめ、ブロックエディタでテキストや見出し、画像などのブロックを作成しておき、アニメーション効果を付けたいブロックを選択し、編集画面右側の「Animations」をクリックしてください。Animationの種類、Delay(発動までの時間)、Speed(動きの速さ)を設定できます。

例えば、以下のようなフェードインするアニメーションを簡単に設定することができます。

Fade In

Fade In Left

Fade In Right

Fade In Up

このようなフェードイン以外にも、バウンス、フェードアウト、フリップ、ローテート、スライド、ズーム、ローリングなど、その他いろいろなアニメーションを設定できます。

もちろん、テキストだけでなく画像などにもアニメーションを付けることができます。

このようにいろいろなアニメーションがありますので、工夫しだいによっては、動きのある面白いホームページが作れるかもしれません。

以上、簡単にブロック単位でアニメーションを設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」の紹介でした。