週末の夜にぼんやりツイッターを眺めていると、
Webサイトでも作ってみようかな、という気分になり、
WordPressの運用を始めてみました。
WordPressといえば、
以前に仕事でも何度か構築した経験はあったのですが、
今回は自分のためのメディアということで、
普段と違うやり方をいろいろと試してみました。
- はじめてのエックスサーバー
- テーマ＆プラグインの導入
- 素材づくり＆素材探し
- ドメインの引っ越し
- その他のちょっとした作業
同じようなことに興味を持つ方がいるかも？
しれないので、記録を残しておきます。
はじめてのエックスサーバー
エックスサーバーといえば国内レンタルサーバの有名企業。
大阪に本社があるそうな。
普段の仕事だと、企業向けのシステムを開発するときは、
AWSなどのクラウドサービスを使うことが多いですが、
今回はてっとり早く自分用の、
WordPress環境が欲しかったので、
エックスサーバーでアカウント作ってみました。
はじめは無料で始めれるので、
とりあえず触ってみてから契約に移れるのも良いですね。
アカウントを作成してから、
管理画面でWordPressを簡単インストール。
あっという間にWordPressを準備することができました。
テーマ&プラグインの導入
続いてテーマ探しです。
せっかくなのでかっこいいサイトを作りたい。
Googleでいくつかテーマを検索していると
onepress というテーマが、
シンプルで使いやすそうだったので導入決定です。
https://ja.wordpress.org/themes/onepress/
PHPのコード書いたり、
CSSのカスタマイズもしたかったので、
子テーマを作成して準備は完了です。
続いてプラグインです。
- Classic Editor
- クラシックエディターを表示してくれる
- WP Githuber MD
- Markdownで記事が書ける
- Highlighting Code Block
- コードハイライト
- Featured Image Generator
- 投稿への画像の検索・追加
- Super Progressive Web Apps
- PWAにしてくれる
このサイトでは技術記事を書きたいので、
クラシックエディター（Classic Editor）で、
Markdown（WP Githuber MD）が使えるようにして。
コードハイライトをきれいに表示してほしかったので、
Highlighting Code Blockプラグインも導入しました。
あと投稿ページが寂しいときに、
無料で使える画像を差し込みたかったので、
Featured Image Generatorを導入してみました。
今のところ、使う機会は少ないですが、
画像はすぐに検索して挿入できると楽です。
とりあえずコーヒー載せておけばOK。みたいな。
Webサイトなので、お気に入りに登録してもらったり、
スマホのホーム画面に追加して使ってほしかったので、
自作した少々残念な感じのfaviconとか準備していると、
「もしかしてPWA対応のプラグインもあるのかしら」
と気づいてしまい、探すとあるんですね。
「Super Progressive Web Apps」
ですって。名前にもセンスを感じます。
https://ja.wordpress.org/plugins/super-progressive-web-apps/
そんなわけで、スマホで本サイトをご覧の方は、
ぜひ、ホーム画面に追加してみてくださいね。
と、宣伝はさておき、
WordPressの良いところは、
探せばだいたいどうにかなるところですね。
素材づくり＆素材探し
続いて素材づくりです。コンテンツの準備。
私が今回WordPressに投稿していくコンテンツは、
元ネタが手元にあるので、
それを加工してWordPressに載せています。
プログラミング入門向けの技術記事がメインなので、
「投稿」コンテンツではなく
「固定ページ」でコンテンツを作成しています。
だいたいのページは、コピペして貼り付けると、
上手く認識してくれるのですが、画像のリンク部分だけは、
URLを加工しないといけないので、ちょっと手間でした。
あと地味にがんばったのが、次の記事へ進む、戻るボタン。
WordPressの標準の関数 the_posts_navigation()
とかでイケるのかと思いきや、なかなか上手くいかず。。
固定ページでの「次へ」「前へ」
みたいなニーズはあまりないのかな。
ググればちょうどいい関数や
プラグインあるのかもしれないけど、
この辺はちょっとだけPHPのコードを書いて実装しています。
ボタンひとつ表示するのも時間がかかってるんですよ。
と心の声が。
素材探しについても少しだけ。
文章中心の読みものサイトが好きなのですが、
それでもたまにキャッチーな画像が欲しくなります。
そうすると無料画像を漁りにいくのですが、
これに時間がかかるのだと気づきました。。
Featured Image Generatorプラグインも悪くないですが、
無料画像を眺めていると
やっぱり洗練された画像が欲しくなります。
そうするとshutterstockとかに行ってしまい、
画像探すだけで楽しいので
時間があっという間に過ぎていきます。
途中で我に返って、このままではいけないと思い、
ブラウザを閉じるのですが、
やっぱりこういうのはセンスの良いデザイナーさんに、
手伝ってもらえたら良いなぁと思うのでした。
あとサイトのトップ画像がデフォルトのままなんで、、
何かまた良いのを見つけて差し替えようと思います。
ドメインの引っ越し
書こうと思ったけど地味な話になるので一言で。
今日の教訓：ドメインはとりあえず先に取ろう。
ドメインの移行が手間だったので。
その他のちょっとした作業
他にもやったことは
- トップページの作成
- プロフィールの表示
- テーマカラーの決定
- faviconの準備
- Googleアナリティクスの導入
- SEOの設定（OGPまわりの設定）など
- いいね、Tweetボタンの配置
- Googleアドセンス（広告表示）
実際にやってみると、あれが足りない、これが足りない。
やらないといけないことはたくさん出てきます。
特にOGP画像なんかは、
タイトルを生成してくれるプラグインないのかな、
と探していても結局見つからず。。
SNSと連携する、いいねボタンや、
Tweetボタンも表示して見たものの、、
読むときに邪魔でしかなかったので削除しておきました。
Googleアドセンスもやろうかな、
と思っていたのですが、
これも邪魔な気がしてきたのでやめました。
まずは役に立つサイトを目指します。
そういう意味では、
プロフィール画像も要らんような気もしてきたり。。
でもUdemyの宣伝はしたいし、、悩ましいところです。
まとめ
そんなわけで、ここ数日、いろいろやってみましたが、
こだわり始めるとなかなか完成しないことがわかりました。
Done is better than perfect.
とりえあえずリリースして、
これから少しずつメンテナンスしていこうと思います。
あと、そうそう、WordPressを使えるようになるのも
PHPを学ぶ一つのモチベーションかと思います。
これが言いたかったから記事を書いたのです。
何歳になってもWebサイトの制作は楽しいです。
つづく。