【information】

このホームページには、
アフィリエイト広告や
プロモーションが含まれています。
ご質問やご相談、感想などは、「niikenchan@gmail.com」までお願いいたします。
お問い合わせへ

※現在、スキンケア関係の記事をnoteへ移行中です。

応援フォローよろしくお願いいたします。

https://note.com/niikenchannel/

WordPressのテーマをcocoonにした方法【まとめ】

デフォルトのテーマからの変更

 

無料で使える、WordPressのテーマ【cocoon】

デフォルトのテーマから変えてみたら、

むっちゃ良かったので、

変えた方法を記事にしておきます。

 

変えた順番と項目に分けてみましたので、

目次から、必要なところへ飛んでください。

 

※最初はデフォルトのテーマで書いていて、

途中から、cocoonに変えていますので、

おなじケースなら、参考になると思います。

☆いじくった部分が出てきたら、このまとめ記事で更新・加筆していきます☆

 

そもそも、なんでテーマを変えた方がいいの?

 

ところで、テーマってなに?

ひとことで言うと、デザイン集合体のぜんぶ入り。

テンプレートやひな形の集合体。

 

と考えると、

そう遠くはないです。

 

ところで、

デフォルトで付いてくるテーマでも、

とりあえずブログは書けます。

 

ではどうして、

有料のテーマや、

cocoonのような

無料テーマがいいのでしょうか?

 

少し考察してみます。

 

デフォルトのテーマには最低限の機能しかない

 

残念ながら、

デフォルトのテーマには、

必要最低限の機能しか

付いていません。

 

ただし、

プラグインという、

「追加でくっつけられる拡張プログラム」があるので、

欲しい機能の拡張は可能です。

 

しかしながら、

 

同じ機能のプラグインが、

たくさんあってりして、

どれがいいのか、

最初は分かりません。

 

使ったことが無かったら、

わからないのが普通です。

 

そして、

管理やメンテナンスしていくことを考えると、

プラグインごとの管理って大変そうです。

 

ってことで、作者目線のぜんぶ入り、

無料や有料のテーマの出番となります。

 

※テーマの更新があった時について。

cocoonなどのテーマだと、

親テーマ・子テーマというのがあって、

更新ごとの、変更箇所の再設定が不要で、便利です。

ここは、少し先で、解説を書いています

 

cocoonは無料のテーマだけどプラスアルファの機能が付いてて便利

 

無料のテーマの、代表格がcocoonです。

他にも、たくさんあるのですが、

 

人気があって、評価の高いテーマを選んでおくと、

なにかしら、詰まったときに、

ググれば、必要な情報がいっぱい出てきます。

 

このことだけでも、

選ぶ理由になるのですが、

肝心な、付いてくる機能は?

 

ということで、

ちょっぴり紹介です。

 

全部の機能を

使っているわけではないので、

使っているところの紹介です。

 

●インストールすると、サイドメニューに、「cocoon設定」が現れます。

 

ほとんどが、ここから設定できてしまいます。

 

タブ形式で、項目が分かれていて、

感覚でも、ある程度のことが、

分かりやすく作ってあります。

 

 

スキン(いっきに全体の模様替え)、全体、タイトル、広告、

目次、おすすめカード、ボタン、ウェイジェット…などなど、

いろいろな設定項目があります。

※すべてを設定しなおす必要はないので、安心してください。

☆Googleアドセンス広告などの、設定もあります。

 

目次機能などは、

設定をいじらなくても、

 

記事に段落を入れると、

勝手に作ってくれます。

 

この記事も、

目次の設定は、

デフォルトのままです。

 

他の有料テーマでもOK

 

有料のテーマは、

使ったことがないのですが、

ググって調べたところ、

 

作者ごとの、個性や特徴・こだわりがありそうで、

気に入ったテーマが見つかったら、

好みで選んでOKと思います。

 

ぼくは無料がいいので、

cocoonにしました♪

 

シンプルで

読みやすそうですし♪

 

テーマを変える前の準備

 

cocoonがいい!となったら、さっそく変えて…、

 

ちょっと待って!

ちょっぴり準備をしときましょう。

念のために、いじくっている部分の、

バックアップは取っておきましょう。

※記事自体や、データベースなどのバックアップも、

取っておいてくださいね。

 

ぼくが取っておいた、バックアップ部分です。

 

広告タグの保存

 

ここは、

各広告サイトから、

あらためてもらってくることもできるのですが、

タグってぱっと見ぃ、

どれがどれだか、

わからなくなりそうなので、

 

テキストエディタで、○○広告のタグ、で保存していました。

 

サイドバーなどのテキスト部分の保存

 

ここも、

並べ方や表示を、

いじくっていたので、

広告のタグと同じように、

 

テキストエディタで、○○広告のタグ、で保存していました。

 

ブログのデータのバックアップ

 

記事とデータベースのバックアップ。

 

ツールのエクスポートと、BackWPupでのバックアップを取りました。

BackWPupも、プラグインです。

※念のために、これで復旧できるか?を、

試しておくのが、いいようです。

…ちなみにですが、クラウドのデータ共有サービスを使って、

バックアップしています。(使ってみたかったからだけなのですが。)

 

手順の確認と明確化

 

ここ、大事です。

 

インストールなどの途中で、

迷子にならないためにも、

 

手順は、明確にしておいたほうが良いです。

 

ぼくは、

リアルに書いて、

進めてみました。

 

そして、

進めたところを、

赤線で消していきました。

 

 

cocoonのダウンロードとWordPressへのインストール方法

 

こちらから、ダウンロードできます。

親テーマと子テーマの2つを、

ダウンロードします。

 

WordPress無料テーマCocoonのサイト

わいひらさん♪ありがとうございます♪

 

子テーマもダウンロードするのはなんで?

 

cocoonのテーマには、

親テーマと、子テーマがあるのですが、

 

☆テーマ自体の更新があると、

・親テーマで、いじくっていると、

変更箇所が消えてしまうことがあります。

・子テーマを使っていると、

更新部分だけが、親テーマから適応されるので、

変更したところが、残るので安心です。

 

へ~そうなんだ。

便利じゃん♪、

というのが、

初の感想でした。

 

2つともアップロードする

 

ダウンロードできたら、

WordPressにアップロードします。

 

親テーマと、子テーマの、

両方をアップロードします。

 

使うのは子テーマのほう

 

2つのcocoonをインストールしますが、

有効にして使うのは、子テーマのほうです。

 

・親テーマを使うと起こってしまう不便なこと

 

☆テーマ自体の更新があると、

・親テーマで、いじくっていると、

変更箇所が消えてしまうことがあります。

 

子テーマを使うと良いこと

 

☆テーマ自体の更新があると、

・子テーマを使っていると、

更新部分だけが、親テーマから適応されるので、

変更したところが、残るので安心です。

 

cocoonの設定方法

 

cocoonを、

WordPressに

インストールすると、

 

サイドのメニューに

「cocoon設定」が追加されます。

 

ここで、

ほとんどの設定が

できてしまいます。

 

設定の手順

タブから設定していく

cocoon設定の画面にいくと、

各設定画面が、タブ形式になっていて、

ここから、各タブごとに、設定していきます。

 

メニューとサイドバー

 

ここは、cocoon設定ではなくて、

「外観」の「メニュー」と「ウィジェット」です。

 

ここで設定したのが、

トップにあるメニューと、

同じくトップにある、

4つのカードの設定。

 

そして、

サイドバーの設定です。

 

実は実は、ここのとこは、

ヒトデさんのYouTubeから教わりました♪

ヒトデさん♪ありがとうございます♪

 

※変更前のテーマで使っていた、サイドバーのあるところ

テーマを変えたとき、元のテーマのサイドバーがなくなっていて、むっちゃ焦りました。

でも、大丈夫です。ちゃんと保管されています。

ウィジェット画面の左の下のほうにある、

「使用停止中のウィジェット」か「使用停止中のサイドバー」に、

保管されています。

これをドラッグして、「サイドバー」のところに持っていったら、復活しました。

どきどきです。

 

アドセンス広告の設定・貼りかた

 

アドセンス広告に合格していたら、

「広告」と「アクセス解析・認証」で、

アドセンス広告の設定ができます。

 

小技集

投稿日と更新日の表示

 

・投稿日は、

デフォルトの設定で

表示されますが、

 

インデックスのタブから、更新日の表示の設定ができます。

 

・カテゴリーごとですが、

トップやサイドバーの、

一覧表示の有無も、

設定できます。

 

※インデックスと、サイドバーのウィジェットの両方で、設定できるのですが、

トップのページとサイドバーの、両方で適応するようです。

 

ちょっとの記事の手直しで、更新日を変更しない方法

 

すぐ上に書いた

【投稿日と更新日の表示】

の応用です。

 

そのままだと、

ちょっとだけ

手直ししただけの、

記事の更新日も、

変更されてしまいます。

 

そして、

トップにどんどん

表示されてしまいます。

 

ここの改善方法です。

 

記事の新規追加の画面にありました!

右のサイドバーの、わりと上のほうに、

「更新日の変更」という箱をみつけました。

ここで、選択できます。

 

サイドバーに追従目次を表示させる方法

 

目次の作り方と、

サイドメニューに、

下スクロールについていく、

目次の設定方法を書いてみました。

 

長い記事とかだと、

これがあると読むのに便利です。

 

サイドバーに追従目次を表示させる方法

 

フッターに文字やバナーを入れる方法【WordPressのCocoon】

 

ブログの一番下にある「フッター」部分。

地味な部分なのですが、

ブログの情報やらを、いろいろ入れて、

カッコよく!それらしく!してみましょう!

 

フッターに文字やバナーを入れる方法【WordPressのCocoon】

 

モバイルでも。フッターに文字やバナーを入れる方法【WordPressのCocoon】

 

スマホ用のブログにも、

フッターにいろいろ入れてみましょう!

 

モバイルでも。フッターに文字やバナーを入れる方法【WordPressのCocoon】

 

まとめ

 

目次に沿って、まとめます。

 

デフォルトのテーマから変更しています。

・デフォルトのテーマには最低限の機能しかない。

・cocoonは無料のテーマだけど、プラスアルファの機能が付いてて便利。

・気に入ったテーマが見つかったら、他の有料テーマでもOK。

テーマを変える前の準備

・広告タグの保存

・サイドバーなどのテキスト部分の保存

・ブログのデータのバックアップ

・手順の確認と明確化…マインドマップが便利かも。

cocoonのダウンロードとWordPressへのインストール方法

・親テーマと子テーマを、ダウンロードする

・2つともアップロードする

・使うのは子テーマのほう

cocoonの設定方法

・タブから設定していく

・メニューとサイドバーは、

「外観」→「メニュー」と「ウィジェット」から設定する。

 

 

 

さいごに

 

cocoonなどの

無料や有料のテーマのことは、

WordPressを導入したときから、

知ってはいたのですが、

 

WordPressの

さわりはじめでしたので、

どこに何があって、

どこをいじくるとどうなる?

という部分が

まったくわかりませんでした。

 

少しずつ設定したり

していくうちに、

ちょっとずつ、

ちょっとずつ、

解明していきました。

 

ようやく、なんとか、

テーマのことが、

少しはわかりだしてきたので、

今回の、cocoon導入に挑戦してみました。

 

けっこうハードに試行錯誤したので、

まとめ記事にすることに。

 

これから、cocoon導入する!

というかたの、

参考になれば

うれしく思います。

 

タイトルとURLをコピーしました