【WordPress】テーマ『Minimal』がプログラミング学習者にぴったりな件。機能追加の方法も紹介

テク・プログラミング

こんにちは!プログラミングを勉強しはじめておよそ20日の初心者、gtgtです。

去年7月に書いたWordPressテーマ『Minimal』についての記事にアクセスが継続的に入っているので、きっと関心のある方が多いんだろうと思い、この記事を書いています。

私はこのテーマを使っている9ヵ月ほどの間に、分からないなりに機能追加やカスタマイズもしてきましたが、プログラミング学習者的にはかなりいい感じの仕様です。具体的に何がいい感じかというと、

ガチで必要最低限の機能しかない
なので、欲しい機能は自分でつけなければいけない
カスタマイズ時は自分でコードをいじる必要がある
ググる&エラーの繰り返しで、徐々にコードのしくみがわかってくる
コード自体がすっきりしているのでいじる場所が分かりやすい

要するに、自分のブログをプログラミングの練習台にできるということです。なので、これからプログラミングを学びたい方や現在勉強中の方にとっては、使ってみる価値大アリのテーマです。

逆に「htmlとかcssとかphpとか、よくわかんないし下手してバグったら怖い!そんなことに時間は割けない!」って人には扱うのがしんどいです。たぶん心が折れます。そういった方には下の記事から自分にぴったりのテーマを探すことをオススメします。ボタンひとつで機能追加やレイアウト変更が自由にできるもの、けっこうありますよ。
【初心者OK!】Wordpress(ワードプレス)ブログ用おすすめテーマの紹介!

そういうわけで、この記事ではプログラミング初心者でもできる『Minimal』への機能追加と、その方法を紹介します。本テーマへの機能実装にどれくらいの知識が必要なのかの目安として、購入検討の材料にしていただけましたら幸いです。

はじめに

これからはじめてコードをいじる人へ

まずはコーディング用のテキストエディタをゲットしましょう。無料のもので大丈夫です。
Atom

ファイルに大幅な変更を加えるときには、必ず変更前のバックアップを取っておいてくださいね。万が一バグって、元に戻せなくなったら悲惨ですので……。

それから、Google Chromeのデベロッパーツールを使えるようになっておきましょう。どういうツールかというと、ブラウザで表示しているページのhtml・CSSコードを表示して、どのコードがどういうふうに働いているかを調べることができるという優れものです。
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

プラグインについて

WordPressを利用している方なら「プラグイン」という便利なものが存在するのを知っていると思いますが、Minimalを利用するなら導入するプラグインは最小限にして、簡単な機能追加なら自分で行うほうがいいです。せっかくのMinimalですので。

Minimal開発者であるマナブさんがおすすめする8つのプラグインは入れておいて損はないと思います。下記の記事を読めば「プラグインをドカドカ入れるべきでない理由」もわかります。

Web系言語をちょっと勉強すればわかるのですが、「記事内に目次をつくる」とかならプラグインがなくてもパパッとできますので、知識を身に付けるためにも自分でググってやってみるのがいいです。

……とはいえ、どれだけトライしてもエラーが出るものを頑張り続けるのもしんどいので、どうしてもやり方がわからない場合はプラグインに頼ってもいいですね。

最初の設定

ナビゲーションメニューや著者についての項目を編集する方法は、下の記事をご参照ください。

機能追加

「関連記事」の追加

【WordPress】プラグインなしで関連記事を表示する方法【CSS付き】

Minimalは初期設定のままだと関連記事の表示ができませんので、この記事を参考に設置してみましょう。

コピペだけでイケます。簡単!

「人気記事」の追加

『プラグインなし』で人気記事一覧を出力する方法【WordPress】

お次は人気記事一覧の実装です。こちらもコピペで実装できます。らくちんですね!

お問い合わせフォームの設置

Googleフォームで簡単!WordPressにお問い合わせを設置する方法

よくあるメールフォームです。これがなければ読者とコンタクトがとれません。自作するのはちょっと難しいので、初心者の場合はGoogleフォームを埋め込むのが手っ取り早いかなと思います。自信がついてきたら自作にチャレンジするといいですね!(私はチャレンジして玉砕しました!)

記事内にオシャレなボタンや枠をつけたい

CSSで作る!押したくなるボタンデザイン100(Web用)
【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

これもコピペ!ひたすらコピペ!
プラグイン「AddQuickTag」と併用すれば記事内にサクサク枠がつけられて、さらに良い感じです。

ショートコードの実装

ショートコードとは、Wordpressの記事や固定ページに書く複雑で長い記述を、半角中カッコで囲った短いコードに置き換えることのできる機能です。

WordPressで複数のショートコードを作成し、投稿記事に呼び出す使い方

当ブログではアドセンスのタグをショートコードに置き換えて利用しています。記事の編集ページがすっきりしてとても見やすくなるのでオススメです。AddQuickTagと併用するとさらにいい感じ。

こちらはコピペと、自分で多少コードを書き換える必要があります。function.phpをいじるため、マズい間違え方をするとサイトが表示されなくなる可能性があることに注意してください。

機能の停止

必要な機能を追加した後は、いらない機能をさくっと停止して高速化しましょう。

リビジョンの無効化(回数制限)

リビジョンとは、投稿記事の編集記録を自動で保存する機能です。あると便利といえばそうなのですが正直使わないので、データベースの容量を削減し高速化するために停止しちゃいましょう。

WordPressのリビジョン機能を停止・制限する方法

こちらもコピペでOKです。簡単ですね!

あれ?簡単そうじゃん……

そうです、ただ機能を実装するだけなら、たいていの場合は先人たちの知恵の結晶をコピペするだけでなんとかなっちゃうのです。

ただ、問題は見た目の細かな調整です。ここまでで紹介した方法を実際に試してみるとわかるのですが、正しくコピペしてもビジュアルが思ってたのとなんか違う……なんとか直したつもりだけど、スマホからみたら変……みたいなことになるはずです。

理由は簡単で、コピペ元のコードがMinimalのCSSの記述に対応してないからです。なので、コピペした後に見た目を整えるためにCSSやphpをいじる、という作業が必要になります。

コードに不慣れな初心者ならここで苦しむことになると思いますが、デベロッパーツールとGoogle検索さえ上手に使うことができれば自己解決できます。脱・プログラミング初心者するためには必要な過程ですので頑張りましょう。(私も頑張ります)

レイアウトだけでも自由に触れるようになるには?

テーマを使っているうちに「ここの色を変えたい」とか「この角を丸くしたい」「ここに線をいれたい」みたいに細かい調整がしたくなるかもしれません。

「別にプログラミングをがっつりやるつもりはないけど、見た目くらいはいじれるようになっておきたい」という方は、HTMLとCSSの基礎知識だけでも知っておくと、かなりレイアウト編集の自由度があがりますよ。

ドットインストール」で公開されている無料の学習動画を見ながら、マネしてコードを書いてみるだけで、このあたりの知識は十分身に付きます。

まとめ:Minimalとともに成長しよう

Minimalをより自分好みにしようと思うと、どうしても試行錯誤が必要になります。コード慣れしていない初心者であれば、思ったとおりにカスタマイズできなくて編集に時間がかかってしまうこともあるでしょう。

しかし、それこそがMinimalの魅力であると感じています。プログラミングはただ本を読んだり動画を見ているだけではなかなか身に付かず、自分で手を動かすことが肝要です。Minimalを導入してコードを編集する作業量を増やし、知識をモノにするスピードを加速させていくのも、有効な学習方法のひとつだと思います。

これからプログラミングに慣れ親しんでいきたい方にはおすすめしたいテーマです。興味が湧いたらぜひ検討してみてください!

あわせてどうぞ

【コピペでOK】「Minimal」初期設定と落とし穴!コードを上手く編集してスマートに管理しよう【WordPressテーマ】
WordPress有料テーマ「Minimal」のカスタマイズ方法と購入した感想【初心者でもできる】

どうしても難しい場合は……

もし、どうしても思ったようにカスタマイズできなくて辛い場合、カスタマイズ代行を承りますので、お気軽にご相談ください。

Wordpressのちょっとしたお悩み解決します かゆいところに手がとどくカスタマイズを提供します