はじめに
会社で技術ブログを開始することになりました。外部のサイトで記事を書く運用でも良かったのですが、ひとまずミニマルに開始してみようということで自社HP上に記事を公開していこうと考えました。
NeulabのHPはWordPressというCMS（コンテンツ管理システム）を使って作成しています。そこでWPで技術ブログを開設するまでの流れや技術的な設定内容を第１回目の技術ブログ記事にしてみようと思います。
カスタム投稿タイプを作成する
WPのページのタイプは固定ページと投稿の２種類あります。投稿の方が技術ブログには適しているのですが、NeulabのHPの投稿はあいにく「お知らせ」としてすでに使ってしまっています。別の投稿を使うにはカスタム投稿タイプというものを新しく作成する必要があります。
カスタム投稿タイプの具体的な説明は調べると詳しい記事がたくさんあるのでこの記事ではしません。作成方法もいくつかあるのですが今回は簡単にプラグインを利用することにします。WPには機能を拡張させる便利なプラグインが無数にあります。今回Custom Post Type UIというプラグインを導入しました。
技術ブログのカスタム投稿タイプを作成
プラグインを導入するとCPT UIという項目がWPのダッシュボードに追加されます。この中の「投稿タイプの追加と編集」を選びます。以下のような入力フォームが表示されるので基本設定を入力して「投稿タイプを追加」で新しい投稿タイプの作成は完了です。必須入力は基本設定のみなのでスラッグと複数形ラベル、単数系ラベルを設定すれば作成できてしまいます。また、下の方にスクロールすると詳細設定が出てくるので自分の好みにカスタマイズもできます。
作成が完了するとWPのダッシュボードに新たに「技術ブログ」の項目が追加されます。こちらから技術ブログ記事の投稿ができるようになりました。
技術ブログ用の分類タグを作成
記事分類用のタグを作成しておけば後々の検索などで便利ですよね。分類タグの作成も同じCustom Post Type UIのプラグインの機能で作成可能です。「タクソノミーの追加と編集」を選んでタクソノミーを追加します。技術ブログに使用するタグの作成ができました。
コードブロックのプラグインを導入する
技術ブログなのでコードを記事に書く機会が多くなると予想されます。しかし、WPで用意されているコード表示機能を使ってHTMLのコードを表示させてみると以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テストページ</title>
</head>
<body>
<p>テストコード</p>
</body>
</html>色分けもしたいし、言語の表示もしたいです。コードブロックのプラグインを探してみましょう。
WPにはコードブロックの機能のプラグインもたくさんあります。なんやかんや検討し(1)、Code Block Proというプラグインを導入することにしました。導入した結果が以下のような見た目です。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テストページ</title>
</head>
<body>
<p>テストコード</p>
</body>
</html>良い感じに色分けもしてくれて、行番号の表示やコピーボタンもついてます。これで良さそうですね！
メニューに技術ブログを表示する
最後にヘッダーのメニューに技術ブログを表示させましょう。
WPのダッシュボードの「外観」の中に「メニュー」という項目があります。
ここを選んでヘッダーメニュー内に「技術ブログ」を設定すればOKです。
技術ブログの項目がヘッダーメニューに表示されるようになりました！
最後に
ひとまず技術ブログ記事の公開がHP上でできるようになりました。今回はコードを記述することなくプラグインやWPの設定などで機能を追加することができました。でも、まだまだ不満な点・修正したい点がたくさんあります。次回は技術ブログのアップデートの様子をお届けできればと思います。
- 1：検討した内容はこちらのスクラップに載せています。
