戻る

WordPress - 東京秋工会 New Web

2023/10/10

WordPressアイコン

環境
WordPressとテーマLightning
投稿の仕方(基本)
投稿の仕方・画像上にテキストを追加
VK Pattern Library
新ホームページ
感想

他の関連ページ
WordPress - 東京秋工会新HP カストマイズ

環境

高校の同窓会東京支部「東京秋工会」のホームページを14年間担当しているが、今後の担当者の継承とセキュリティ上の課題により、サーバーを新規契約し・移行することになった。

これまでレンタルサーバー会社はlolipopと契約している。サポートに関して、直接電話で問い合わせしたことはなかったがメールでの問い合わせでも丁寧に対応してくれたので新ホームページも同会社にした。

レンタル料金は、ベーシックプラン(*)契約期間12ケ月で月額990円(税込み)、契約期間が長いと割安になり最長36ケ月の場合月額550円(税込み)となる。ファイル容量400GB。平日電話サポートあり。独自ドメインが永久無料。この上のレベルの契約はエンタープライズプランになる。 (*ベーシックプランは2023年10月12日にハイスピードプランに名称が変更になった。)

現在のレンタルサーバー契約は2009年から続いておりSSL化がなされていない。SSL化とはSecure Socket Layerの略でインターネット上のやり取りを暗号化すること。しばらくは同窓会のホームページでは暗号化など必要ないと思っていたが、そのうちブラウザに「保護されていない通信」、「安全ではありません」などと表示されるようになった。

urlは http://～.jp/で、httpの後に s が付いて https://～.jp/となっていればSSL対応がされている。

lolipopの契約時からlolipop提供のドメインを使用しているが、SSL化するには独自ドメインが必要という。以前は独自ドメインを使うにはムームードメインという別のドメイン管理会社との契約が必要だったが、最近契約形態によってはドメイン使用料が無料になるプランが出来た。ムームードメインもlolipopとおなじGMOペパボの系列会社。

ドメインというのはインターネットでの住所のこと。http://akiko-tokyo-doso.main.jp/がurlでakiko-tokyo-doso.main.jpがドメイン。さらにこの中でakiko-tokyo-dosoはダブっていなければ任意に設定できるがmain.jpは勝手には設定出来ない。main.jpはlolipopが持っている無料の中から選んで使えるが、独自ドメインの場合は取得/更新料を別途支払う。「.com 750円/1728円」, 「.net 1628円/1628円」, 「.jp 2035円/3345円」など、それぞれ価格の異なる料金をしかるべきドメイン管理会社に支払って使わなくてはならない。

.comはCompany、.netはNetwork(通信網)分野などとなっていたが、現在では区別はなく様々なところで使われている。

ホームぺージは、自分のpcでhtmlというプログラム言語を使ってコーデングしてftp(File Transfer Protocol)というソフトでサーバーにアップロードする。htmlは使いこなすにはある程度の経験が必要で、適度に見栄えをよくするには更にjavascriptやphpなど他の言語の知識も必要になり、担当者の継承を難しくしている。

10年ほど前からWordPressという無料のwebサイト作成ツールが使われるようになって、2022年現在全世界のwebサイトの43.3%で使われているという。さらにWordPressに追加して使いやすく見栄えをよくする様々なオプションプラグインが発表されている。

これまで自分のpc上でサーバーのローカル環境を構築するXAMPPを使用して、WordPressのテストをしてみて、自分の担当しているホームページ作成にはテーマ「Lightning」が使いやすいと判断し、本番稼働している東京秋工会のホームページを、新しいドメインとレンタルサーバーを契約し移行するに至った。テーマとはあらかじめ作られたデザインでこれを変更・調整することで省力化できて事前にイメージが持てる。

WordPressとテーマLightning

ホームページサーバーではWordPressが使える環境が準備されていて、すぐにカストマイズが始められる。

WordPressを分かりやすくカストマイズするには既存のテーマを使う。Lightningという日本人が作ったテーマが使いよい。Lightningを導入時に同じ会社の無料のVK Block Patternsの導入を推奨され導入した。使いようによっては便利なプラグインである。
　VKは株式会社ベクトルという2010年設立の日本の会社。Lightningもこの会社の製品。Lightning社

投稿の仕方(基本)

WordPressとLightningを使ったホームページの環境カストマイズについては別途述べてあるので、まずは投稿の仕方を最新のWordPressのブロックエディターを使って簡単に紹介する。ほとんどの投稿パターンについて便利な設定アイコンが準備されており文書作成プログラムより容易に記事が書ける。

広く世界中で使われているため「WordPressブロックエディターの使い方」などで検索すると多数でてくるので参照できる。

WordPressにログオン
ダッシュボードの「投稿」、「新規追加」

タイトルを追加の文字に上書きしてタイトルを書く
右側に、投稿・ブロックなど設定のカラムが表示されない場合は、右上の白抜きの四角いアイコンをクリックする。たたまれているときは白の背景に黒抜きになっている
右上の表示状態をクリックし「公開」であれば公開、「非公開」または「パスワード保護」にも出来る。非公開にすればサイト管理者と編集者にだけ表示される

ブロックエディターは、文章や画像などをブロック単位で管理する
タイトルを上書きし、改行を押すと1行空けて次のブロックが記入できる。shiftキー+改行では1行空けないで記入できる
右のカラムの上部「投稿」は全体の投稿を、「ブロック」は、個々のブロックごとの設定をする
設定するブロックをしっかりとクリックし、エディターに伝えることが肝要。対象のブロックは細い青枠で囲まれる
白抜きのは、次のブロックを書き込む時にクリックする
ブロックの種類のアイコンが表示されるので、目的のもの選ぶ。見つからなければ「すべて表示」から探す

前図で画像アイコンをクリックし画像の挿入
「アップロード」でpcの画像をアップ
一度アップしたものはWordPressのメディアライブラリに登録される

コスモスの画像をアップロード
右カラムのブロックエディターで画像のサイズなど編集
画像の枠に表示される小さい〇でも大きさを調整できる
画像をクリックすると、小窓が表示される
画像の説明キャプションを記入する

画像をまとめてアップロードするには「ギャラリー」を選ぶ
同様にアップする写真をまとめて指定する

投稿全体の設定をするため、右上の「投稿」をクリック
「カテゴリー」を指定
「アイキャッチ画像」をアップロードする。一度アップしたものであれば「メディアライブラリ」から選べる
アイキャッチ画像はなくてもよいが、投稿記事のイメージ付けになるので出来る限り設定する
投稿画面の最後の「公開」。中断するときは「下書き保存」

「アイキャッチ画像」の例
最後に右下の「アイキャッチ画像を設定」をクリック

公開された投稿
投稿一覧の2番目に表示されたのは、最初の投稿が「ブログのトップに固定」としてあるため

投稿の仕方・画像上にテキストを追加

画像に文字を重ねたいことがある。画像の下にキャプションを書き込むことが出来るが、ここでは位置を調整などできる
「画像上にテキストを追加」をクリック
そのまま文字を追加する

ここで文字以外の場所をクリックするとブロックが「カバー」表示になる
コンテンツ位置を9か所選べる

右の「スタイル」をクリックすると、様々なカバーの「スタイル」が調整できる

VK Pattern Library

Lightningを使う際に「VK Block Patterns」というプラグインを推奨すると出る。無料というので導入しておいた
投稿画面の上部に「VK Pattern Library」というタグが出ているので使ってみた
これがなかなかの優れモノ

VK Pattern Libraryのホームページが表示される
ライセンス区分で「無料」を選び、その他は記入せず「検索」を押す
検索結果から自分の目的のパターンを選んで「コピーする」を押し、自分の投稿ブロックにペーストするとそのままの記事がコピーされる

自分の投稿にペーストされた記事は上書きし画像は置換だけで、記事が出来上がる

下の３枚の写真はギャラリーブロック
投稿のギャラリーブロックを選んで、右カラムの「リンク先」のメディアファイルを指定しておくと、読者が画像を拡大出来る

出来上がりの投稿記事
有料でも検索してみると欲しくなりそうなサンプルがあるが、予算の都合でここは参考にするだけとする

新ホームページ

できあがったホームページはこちら==>東京秋工会ホームページ

感想

実際運用レベルになってみると、これまでは投稿記事や同窓会としての情報発信など記事の種類によって目次・配置・世代管理など記事作成以外にも運用上考慮すべき煩わしさがあった。WordPressのカテゴリーやアーカイブなどを利用すると管理面の煩わしさがほとんどなくなる。さらに出来上がったhtml文書や画像などをFTPを使ってサーバーの正しいフォルダーにアップロードの必要があったが、これも不要になった。

「検索ボックス」でサイト内検索がそのまま出来る。データベースにSQLを使っているので、タイトルだけでなく記事の内容も検索対象になっている。以前Googleでサイト内検索機能を提供していたがなくなって、ドメインを入力して検索する別の機能になった。

投稿の容易性だけでなくサイト管理の容易性なども広く使われる要因との認識をした。

戻る