Dev

【プラグインetc】WordPressで個人の技術ブログを立ち上げる時のメモ

技術ブログの立ち上げtips

先日、これまでのLaravelやVue.jsの知見を一度ガッツリ貯めようと、
初心者の方向けのチュートリアル記事を書いていました。

あわせて読みたい
【実務入門】Laravel8.xでメモ・ToDoアプリ作成/PHPUnitでのテストまでのチュートリアル この記事の想定読者 ✔︎ PHPを調べながら読み書きできるかな?レベルの人 ✔︎ 写経ではなく実務で使えるチュートリ...

その時に、コードを貼り付けたり、コマンドラインの表示をさせたかったのですが、Preタグやcodeタグで書くだけだと、どうしても記事の可読性が低かったんです。

ぺん
ぺん
記事更新してるときに頭抱えてたなそういえばw
この記事を書いた人
この記事を書いた人
いや、まあ旧エディタ(TinyMCE)だとコードブロックの挿入周りの罠大杉ですよ😭😭

その際に、使えるプラグインをかなり調べたのですが、正直言って罠があまりにも多く、その辺りを一度まとめておきたかったので書きました。

WordPressの個人技術ブログって、英語とかだと結構よく見るんですが、日本だとQiitaとかZennばっかでなんだかなぁと思ったので、イケてる技術ブログを作る際の参考にしてください。

✔︎ 当ブログの環境

WordPressバージョン: 5.6
WordPressテーマ: JIN(v1.2)

WordPressエディタ: 旧エディタ

スポンサードサーチ

なぜ個人で技術ブログを持つべきか

ぺん
ぺん
正直、QiitaとかZennで頑張ってもエンジニアとして知名度が一瞬上がるかもしれない。だけど長期的に見て自分の資産にならずに、QiitaとかZennのドメインパワー上げてるだけなのは辛いよな。
この記事を書いた人
この記事を書いた人
まあ単純にSEO的な視点だと、自分で作った時間は自分のドメインパワーを伸ばすことに使うべきかな?とは思います。

結局、QiitaやZennでも流入が最も期待できるのはSEOだと思われます。

内部での回遊はあるでしょうが、しっかり質の高い記事を出せるなら技術記事サイトで投稿するのは知名度獲得やブランディング目的のぞいてメリットは薄そうです。

自分でせっかく記事を書くなら自分のサイトのドメインパワーをあげることに使ったほうが生産性高くないでしょうか?

この記事を書いた人
この記事を書いた人
巨大なNoteやQiitaで記事を書いた方がSEOで上げやすいタイミングも稀に発生しますが、年単位で見るとドメインパワーはそこまで大きくないし、技術記事だとなおさら内容が最も重要なので、個人ブログで書く方がいいんでない?と考えます

WordPressで個人技術ブログを立ち上げるときのサーバーやドメインについて

ぺん
ぺん
エンジニアならAWSで構築も選択肢…かと思いきやどう考えてもLightsailとかですらレンタルサーバーより高いし、やっぱりレンタル一択なんだよなあ
この記事を書いた人
この記事を書いた人
そうだね〜。SSGとかでヘッドレスCMS作るとかなら少し話は変わってくるけど、個人でブログ書きつつ必要があれば開発するとか少しまだまだ辛いイメージがあるねヘッドレスだと

一応、ヘッドレスCMSなら日本製のmicroCMSとかかなり良さそうな感じではあります。

しかし、やはりWordPressのエコシステムはとてつもなく大きく、ありとあらゆるニーズに対応する無料プラグインもあり、デプロイも簡単なのでまだまだWordPressの方がコスパはいいのかなーという印象ではあります(ヘッドレスでCMS運用したことないので、詳しい方、教えてください🙏)

レンタルサーバーについて

ぺん
ぺん
月単位で契約できて、技術者向けとして必要な機能も充実しているGMOのConohaWINGがやっぱり一択かなー?
この記事を書いた人
この記事を書いた人
そうですね。うちはmixhostで運用していますが、速さや容量については全く文句もなくコスパもいいのですが… メインで取ったドメインの中に自動的に追加したドメインを含むページが生成されるとか意味不明な仕様が見つかるのでお勧めできなくなりました😭

コスパ最強(月700円~)で契約が年単位ではなく月単位で調整しやすい。独自ドメインが永久無料で取れる。モリサワフォント無料(地味に嬉しい)。無料独自SSL…

この辺りを考えるとやっぱりConohaWING一択なのかな〜という感じです。

>> ConohaWINGのサイトはこちら

ドメインについて

ぺん
ぺん
ConohaWINGで契約したらドメイン永年無料だけど…まあ別途でやるならお名前.comやValueDomainあたりかな?
この記事を書いた人
この記事を書いた人
と言いたいところですが…お名前.comはマジでメールマガジンがうざすぎるのでGoogle Domainsとかはどうでしょうか?

ドメインについてはGoogleで取っとくのが今っぽいかな〜と思います。AWS使ってる人いたらRoute53でもいいかもしれません。値段はあんまり変わんないような気がしています。(もしかしたらGoogleの方が安いとかあるかも)

>> Google Domainsはこちら

この記事を書いた人
この記事を書いた人
記事書きながらお名前.comの今のドメインをGoogleDomainのTransferに入力してみたらドメイン代金が大体60% OFFくらいになりました… Googleいいかもです

テーマについて

ぺん
ぺん
うーん、まあ正直なところ技術ブログなら無料のテーマ漁っておけばいい気がする
この記事を書いた人
この記事を書いた人
僕もそう思います…が! テーマごとにCSS設定や記事の設定などが異なるので、テーマを変えると改修が必要になることも…😭

技術ブログとかだと、まずはテキストメインで初めてみて、さらにガッツリブログ運営をすると決めたら早めに「嫁テーマ」を見つけることをオススメします。

国内の有料テーマは、運用のしやすさも考えられて作られているものが多いので、5000円~購入できるので一考してみても悪くないかな?と思います。

あわせて読みたい
【用途ごと18選】SEOにも強いWordPressの美しいテーマを紹介します【ワードプレス】 今回は、そんな僕がおすすめする有料のワードプレステーマについてまとめてみました。ぜひテーマ選びの参考にしていただければと...

スポンサードサーチ

WordPressで個人技術ブログを立ち上げるときのエディタ選定

ぺん
ぺん
ここでは旧エディタ(Classic Editor)と呼ばれるTinyMCEを使ってるけど、なんか2021年からサポート終了するっぽいね
この記事を書いた人
この記事を書いた人
エンジニアならTinyMCEの方が編集効率が高い(実際に僕は編集のエイリアスのような物を大量に登録して使ってます)と思うんですが、全体的にプラグインも旧エディタのサポートを切る流れなので😭

結論としては、今までTinyMCEを使い古してきたわけでもなければ、新しいエディタGuternbergを使う方がいいでしょう。

TinyMCEの旧エディタなら、直接HTMLをいじりやすいというのが大きな利点です。コード書かない方なら苦痛を感じないでしょうが、Webエンジニアならすぐにコードさわれないのが異常に痒いです。Gutenbergマジで辛い。

しかし、まあ2021年に旧エディタサポートが切れるのとWordPressプラグイン全体が旧エディタのサポートを切っているのでそれに乗っかるしかありません。諸行無常です。


▲【推奨】Gutenberg(新エディタ)

▲旧エディタ(TinyMCE)

 

僕は既にTinyMCEを5年くらい使っているので、新しいエディタへ移行すらできません…正直、編集効率が落ちすぎて辛いです。

この記事を書いた人
この記事を書いた人
TinyMCE自体のサポート切れてるわけでもなければ、IEみたいに使い勝手悪いわけでもなく、マジでWP運営頼む…
ぺん
ぺん
まあ時代の流れだなw WP運営もTinyMCEじゃなくて自分たちでReact.js使ってみたかったんだろw

 

WordPressで個人技術ブログを立ち上げるときのプラグイン選定

ぺん
ぺん
ひとまずうちは旧エディタで、やってるんだよなあ。新エディタでの対応が進んでいるプラグインをいずれも使ってるので大丈夫だとは思うけど…
この記事を書いた人
この記事を書いた人
すいません。Gutenbergの方の動作確認はできていません。一応、いずれも新エディタの方がメインで開発は継続されるので、問題はないかと思われます。

コマンドラインの表示に役立つプラグイン SimTerm

>> プラグインリンク(wordpress.org)

docker-compose up -d

▲実際のサンプル

ぺん
ぺん
これ旧エディタだとアニメーションつかないわ、1行ずつしか書けないわでマジで辛かったよなw
この記事を書いた人
この記事を書いた人
新エディタだとしっかりとアニメーション付きのコマンドラインを作成できるようです。

▲しっかりやればここまでカスタムできるそう。すごい…

>> SimTerm公式サイト(ドキュメント)

コードの表示に役立つプラグイン① CodeSnippet DM

>> プラグインページはこちら(WordPress.org)

この記事を書いた人
この記事を書いた人
このプラグイン、モダンでイケてたから見つけた時ちょーテンション上がったw
ぺん
ぺん
2021年1月現在で、有効Install数200+とかで埋もれてるけど間違いなくいいプラグインだと思う。
                    
<?php

$hoge = ['h', 'o', 'g', 'e'];

foreach($hoge as $h) {
  echo $h;
}

                    
<?php

$hoge = ['h', 'o', 'g', 'e'];

foreach($hoge as $h) {
  echo $h;
}

▲実際のサンプル

ぺん
ぺん
なんだよこのクソサンプルコードw
この記事を書いた人
この記事を書いた人
クソコードでもデザインがいいのでよく見えてしまう感が伝わったかとw

欠点として、ファイル名を表示できるような箇所がおそらくないこと。それから、有名な言語10個程度しかシンタックスハイライト出来ないのが、稀に辛いかもしれません。

多くのプログラム言語に対応が必要な場合は、次で紹介するCrayonとかおすすめです。

コードの表示に役立つプラグイン② Crayon Syntax Highlighter

 >> プラグインページはこちら(WordPress.org) 
 >> プラグイン公式はこちら(github)

ぺん
ぺん
旧エディタのサポート投げられてるのが辛いよな😭
この記事を書いた人
この記事を書いた人
うちのブログだとあまりにバグが多すぎて乗り換えました😂 いいプラグイン だと思うんですけどね… 新しいエディタは完全対応してるらしいです。

このプラグイン はカスタマイズ性能が最も優れているシンタックスハイライターだと思います。あと、対応言語も圧倒的に多くて素晴らしいですね。Haskell、Lisp、PowerShell、Zsh、Rust、Swiftなどなんでもござれ。

新エディタとの相性はいいらしいので、Gutenberg使いの方におすすめです。

スポンサードサーチ

まとめ: 技術ブログよもっと増えてくれ!

ぺん
ぺん
うちとかは軸足が技術エントリーではなさすぎるけど、もっと技術ブログ増えて欲しいよな〜
この記事を書いた人
この記事を書いた人
うん、「技術ブログが増える→ナレッジが増える→仕事の生産性が上がる」みたいな流れはあると思うので、もっとエンジニアの方にアウトプットしていただきたいですねー!

そんな感じです。もっと技術系のエントリーが増えることを願って書いてみました。

質問とか聞いてみたいことなどあればぜひコメントの方、よろしくお願いします。スマホだと下のタブから見れるはずです〜。

ABOUT ME
クスハラ
立命館大卒('18)後、ニート。 その後、webエンジニアとして独立・開業。 留学経験あり。TOEIC960点(大学3年時) 複数のwebサービスのグロースから開発までを担当。楽しく仕事して自由に生きているので、ブロガーとしては世の中の当たり前を疑う視点を提供する記事を書きたい。 ■連絡先 shogo.kusuhara[あっと]gmail.com

コメントはこちら

メールアドレスが公開されることはありません。