先日、これまでのLaravelやVue.jsの知見を一度ガッツリ貯めようと、
初心者の方向けのチュートリアル記事を書いていました。
その時に、コードを貼り付けたり、コマンドラインの表示をさせたかったのですが、Preタグやcodeタグで書くだけだと、どうしても記事の可読性が低かったんです。
その際に、使えるプラグインをかなり調べたのですが、正直言って罠があまりにも多く、その辺りを一度まとめておきたかったので書きました。
WordPressの個人技術ブログって、英語とかだと結構よく見るんですが、日本だとQiitaとかZennばっかでなんだかなぁと思ったので、イケてる技術ブログを作る際の参考にしてください。
✔︎ 当ブログの環境
WordPressバージョン: 5.6
WordPressテーマ: JIN(v1.2)
WordPressエディタ: 旧エディタ
スポンサードサーチ
ページコンテンツ
なぜ個人で技術ブログを持つべきか
結局、QiitaやZennでも流入が最も期待できるのはSEOだと思われます。
内部での回遊はあるでしょうが、しっかり質の高い記事を出せるなら技術記事サイトで投稿するのは知名度獲得やブランディング目的のぞいてメリットは薄そうです。
自分でせっかく記事を書くなら自分のサイトのドメインパワーをあげることに使ったほうが生産性高くないでしょうか？
WordPressで個人技術ブログを立ち上げるときのサーバーやドメインについて
一応、ヘッドレスCMSなら日本製のmicroCMSとかかなり良さそうな感じではあります。
しかし、やはりWordPressのエコシステムはとてつもなく大きく、ありとあらゆるニーズに対応する無料プラグインもあり、デプロイも簡単なのでまだまだWordPressの方がコスパはいいのかなーという印象ではあります（ヘッドレスでCMS運用したことないので、詳しい方、教えてください🙏）
レンタルサーバーについて
コスパ最強（月700円~）で契約が年単位ではなく月単位で調整しやすい。独自ドメインが永久無料で取れる。モリサワフォント無料(地味に嬉しい）。無料独自SSL…
この辺りを考えるとやっぱりConohaWING一択なのかな〜という感じです。
ドメインについて
ドメインについてはGoogleで取っとくのが今っぽいかな〜と思います。AWS使ってる人いたらRoute53でもいいかもしれません。値段はあんまり変わんないような気がしています。（もしかしたらGoogleの方が安いとかあるかも）
テーマについて
技術ブログとかだと、まずはテキストメインで初めてみて、さらにガッツリブログ運営をすると決めたら早めに「嫁テーマ」を見つけることをオススメします。
国内の有料テーマは、運用のしやすさも考えられて作られているものが多いので、5000円~購入できるので一考してみても悪くないかな？と思います。
スポンサードサーチ
WordPressで個人技術ブログを立ち上げるときのエディタ選定
結論としては、今までTinyMCEを使い古してきたわけでもなければ、新しいエディタGuternbergを使う方がいいでしょう。
TinyMCEの旧エディタなら、直接HTMLをいじりやすいというのが大きな利点です。コード書かない方なら苦痛を感じないでしょうが、Webエンジニアならすぐにコードさわれないのが異常に痒いです。Gutenbergマジで辛い。
しかし、まあ2021年に旧エディタサポートが切れるのとWordPressプラグイン全体が旧エディタのサポートを切っているのでそれに乗っかるしかありません。諸行無常です。
▲【推奨】Gutenberg（新エディタ）
▲旧エディタ(TinyMCE)
僕は既にTinyMCEを5年くらい使っているので、新しいエディタへ移行すらできません…正直、編集効率が落ちすぎて辛いです。
WordPressで個人技術ブログを立ち上げるときのプラグイン選定
コマンドラインの表示に役立つプラグイン SimTerm
▲実際のサンプル
▲しっかりやればここまでカスタムできるそう。すごい…
コードの表示に役立つプラグイン① CodeSnippet DM
>> プラグインページはこちら(WordPress.org)
<?php
$hoge = ['h', 'o', 'g', 'e'];
foreach($hoge as $h) {
echo $h;
}
<?php
$hoge = ['h', 'o', 'g', 'e'];
foreach($hoge as $h) {
echo $h;
}
▲実際のサンプル
欠点として、ファイル名を表示できるような箇所がおそらくないこと。それから、有名な言語10個程度しかシンタックスハイライト出来ないのが、稀に辛いかもしれません。
多くのプログラム言語に対応が必要な場合は、次で紹介するCrayonとかおすすめです。
コードの表示に役立つプラグイン② Crayon Syntax Highlighter
>> プラグインページはこちら(WordPress.org)
>> プラグイン公式はこちら(github)
このプラグイン はカスタマイズ性能が最も優れているシンタックスハイライターだと思います。あと、対応言語も圧倒的に多くて素晴らしいですね。Haskell、Lisp、PowerShell、Zsh、Rust、Swiftなどなんでもござれ。
新エディタとの相性はいいらしいので、Gutenberg使いの方におすすめです。
スポンサードサーチ
まとめ: 技術ブログよもっと増えてくれ！
そんな感じです。もっと技術系のエントリーが増えることを願って書いてみました。
質問とか聞いてみたいことなどあればぜひコメントの方、よろしくお願いします。スマホだと下のタブから見れるはずです〜。
