ことろぐ。

◆ 【創作サイト】WordPress化のすゝめ

  • 2024/04/04
  • WEB制作

ブログや企業サイトなど、多くの場面で使われているWordPress
WEB制作の知識がなくてもテンプレートを使えば割と簡単にブログやサイトを開設できてしまう優れものです。
私も存在は知っていましたが、WordPressの勉強をしていなかったので、これまで個人サイトは全て静的サイト(HTML/CSSでのコーディングのみ)で作っていました。

が。

内容を更新したいときにめちゃくちゃ不便……( ´•ω•)

という致命的というデメリットがあったんですね。
今回、これを解消するために創作サイトをWordPress化(つまり動的サイトに)してみました。

結果、

めちゃくちゃ良かったです!!( ´¯꒳​¯)

ということで、WordPress化したことで何がどう変わったのか、簡単に綴ってみようと思います!

⛩ WordPressとは

WordPress(ワードプレス)とは、世界ナンバーワンシェアだと言われているオープンソースCMSです。
そもそもCMSとは「Contents Management System(コンテンツ・マネジメント・システム)」の略で、Webサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報(テンプレート)などを一元的に保存・管理できるシステムのことを指しています。

むずかしくて わかんない……

確かにWEB制作の知識がなければ理解しづらいだろうが、この辺りはざっくりと「Webサイトを管理しやすくなるシステム」程度の認識でいいと思うぞ。

つまり、WordPressを導入しているか否かで管理のしやすさが大きく変わるんですね。
さらに言えば、WEB制作の知識がなくてもサイトの編集が簡単にできちゃうわけです!

⛩ WordPress化した創作サイト

創作サイトのメインビジュアル画像

▲ タップでサイトへジャンプします ▲

今回WordPress化をしたのは、上記の創作サイト「華鬼灯」です。
こちら拙作『三國ノ華』の公式サイトな訳ですが、今までは静的サイトで作っておりました。
既にWordPress化しているのですが、見た目はほぼ変わっていません!
が、「三華wikiページ」など一部構成を変えてみた箇所があるので、よければ覗いてみてやってください( ´¯꒳​¯)

⛩ WordPress化の(ことよみ的)メリット

WordPressを導入するメリットはいろいろありますが、ここでは私が導入してみて良かったと感じた点を中心に述べていきます。
ですので、ことよみ的メリットという前提でお読みくださったらと思います( ´¯꒳​¯)

1.サイトの編集・更新がしやすい

まずはこれに尽きますね、本当に。
今までの静的サイトの場合、たった1行、1文字編集するだけでも、わざわざローカル環境でコーディングデータを呼び出し、HTMLを編集し、FTPソフトを立ち上げてサイトをアップロードする……という手間が発生していました。

そもそも都度更新したいサイトを静的サイトで作っていたことが間違いだな。

そうです。おっしゃる通りです(´•ω•`)
1年ほど前の私は静的サイトを作る知識しか持ち合わせていなかったので、WordPress化する意味がよくわかっていなかったのです。
もちろん、静的サイトでも更新はできなくはないのですが、頻繁に内容の更新やページ追加が発生する場合は圧倒的に手間です( ´•ω•)

それがWordPressを導入したことで、WordPressにログインするだけで内容の編集・更新・ページの追加ができるので、間違いなく効率化しました!!
というより、朱いきちゅねが言う通り、知識がなかったとはいえ動的サイトで作るべきサイトを静的サイトで作っていたことが間違いだったわけですね、はい( ´•ω•)

2.スマホからも編集できる

PC上での更新が便利になったほか、スマホでも更新できるようになったこともかなりのメリットでした。
なぜなら

スキマ時間にサクッとサイト更新ができる!( ´¯꒳​¯)✨

というわけです。
私の場合PCを触れる時間に限りがある生活状況なので、PCが触れない時間帯にもサイトの編集・更新作業ができるのはめちゃくちゃ便利です。
WordPressなら下書き機能もあるので、下書きをメモ代わりにすることだってできちゃいます。

べんり!

そうだろうそうだろう( ´¯꒳​¯)
このスマホ編集を活用して、どんどん設定をまとめていきたいですね〜

イラストの用意も忘れずにな

……ハイもちろんです(°꒳​​° )

【補足】
スマホでの作業をするにあたりWordPressアプリを使うこともできますが、私はセキュリティ面も鑑みてアプリは使用せず、ブラウザ上での編集をしています。
ブラウザでの編集に抵抗がないようであれば、アプリを使わずセキュリティ向上を優先してもいいかもしれません!

3.サイトの更新に HTML / CSS の編集が不要

静的サイトでも「class」を用いることで同じCSSを複数の箇所に適用することができますが、文章を変える上ではHTMLの編集が必須です。
ですがWordPress化してしまえば、ブログの記事内容を編集するように、ただ文章を書き換えるだけ!
サイトの枠組みにおいて修正が発生しない限りは HTML / CSS を編集・FTPソフトでアップロードなどという手間は一切不要なわけです。

もう、めちゃくちゃ楽になりました〜〜〜〜〜本当に( ´¯꒳​¯)

しつもん!

お、珍しいな

おりじなるさいとの「わーどぷれすか」って かんたんにできるの?

内容の編集じゃなくて、そもそもの枠組み作成がどうなのかってことか

そう!

いい質問!そこ気になりますよね。
はっきり言うと

簡単ではないです( ´•ω•)

正確にはこだわり具合によっては手を焼くことになる、と言う感じなので、至ってシンプルな枠組みで良いならば、比較的簡単にできると思います。
ここからはこの辺りの話をしていきます。

⛩ WordPress化をする上で必要なこと

まず、ここではWordPress化の具体的な手順はとっても長くなるのでお話ししませんごめんなさい。
具体的な手順は以下を参考にしたので、ぜひこちらを参考にしてください!

オリジナルサイトをWordPress化するには、オリジナルテーマを作る、という形で作業することになります。
テーマというのは、所謂テンプレートですね。
つまりテンプレートを自作するものだと思ってください( ´¯꒳​¯)
その上で必須なのは

*コーディングの知識(HTML/CSS、できればPHP、JQuery)
*レンタルサーバー

この2点です。
テンプレートテーマを使うのであれば、コーディングの知識はなくともサーバーさえあればWordPressを利用することはできますが、オリジナルサイトのWordPressでは、ゼロからサイトを作るスキルが必須になります。
私の場合、既に静的サイトとして構築が完了していたので、あとはWordPressの形式に変換していく作業をすればいいだけで、比較的簡単ではありました。

が。

PHPやJQueryを使う部分にとても苦労しました( ´•ω•)

例えばこのページ。

「世界観」「用語集」と子カテゴリーごとに記事一覧を全件表示させるにはどうしたらいいのか。
ページ移動先でスムーススクロールを実装するにはどうすればいいのか。
そもそもカテゴリーページごとに異なるHTML/CSSにするにはどうしたらいいのか。

おそらく、これらは全てPHPJQueryの知識や実装経験が豊富な方であれば、簡単に実装できたのだと思います。
と言うより、導入自体は、検索して出てきたものをコピペするだけで実装できるので楽と言えば楽です。
が、その答えに辿り着くまでにめちゃくちゃ時間がかかりました( ´•ω•)
自分のやりたいと思っている実装方法の答えがなかなか出てこず、似たような内容をあれこれ試しつつ、時には自分で手を加えてみたり……いろいろ試した結果、上記のページがやっと形になりました(:3_ヽ)_

経験や知識不足も原因ですが、何よりこだわりを大切にしすぎて苦労する羽目になりました。
でも創作サイトです、オリジナルです。

こだわり大切でしょうよ( ´¯꒳​¯)

こだわり たいせつ!

ちなみに「スムーススクロール」というのは、ページ内ジャンプをするとき、ジャンプ先までスクロールするモーションのことだ。実際どんなものか知りたい方は【ここをクリック】してみてくれ。
創作サイト内の該当の項目までスクロールで移動するのがわかるぞ。

⛩ さいごに

オリジナルサイトのWordPress化はして損はないです!
ここは自信を持って断言します( ´¯꒳​¯)
ただし、実際やる上ではさまざまな知識が必要だったりするので、一筋縄ではいかないかもしれません(:3_ヽ)_
もし検討されている方がいらっしゃいましたら、私でよければお力になりますので、お気軽にお声がけください!
以上、ことよみ的「創作サイト WordPress化のすゝめ」でした!
お読みいただきありがとうございました(*-ω-)*_ _)

▼ X、マシュマロ(匿名)での感想もお待ちしてます!