コンテンツへスキップ

ハンドメイドの販売サイトに登録してて
実際に売買を行えてるなら
そのクリエイターさんは
WordPressでの更新もできるだろう

でもドメインをとって
サーバを契約して
サーバの初期設定をして
WordPressをインストールして
サイトを構築するまでの過程となると
敷居は高いかもしれナイ

自分なら
サーバの初期設定から
WordPressのインストールまでで
せいぜい数時間だし
サイトに必要なロゴ画像などが揃ってれば
更に数時間ほどで
とりあえずのサイトを公開できるるる~

逆に言えば
最初からコンテンツを盛り込むとしても
WordPressさえ使えれば
どんなに時間をかけようとしたって
運営し始めるまでは数日だろう

これで数ページなら1万円とか
10ページくらいでもせいぜい数万円とか
カートの設置補助なんかしても
せいぜい5万円くらいで
プラス、ロゴ画像やアイコンを
別料金でもらうとかで
クリエイター専門でサイト制作する仕事を
将来的にはやっていこうかなんて
ぼんやり考えてた

なぜクリエイターなのかって
きっとコンテンツ満載だろうから
サイトのデザイン自体は意外とシンプルでOKで
テーマのテンプレートの簡素なのを
そのまま使えば良さそうだと思ったからだ^^

しかし、実際に着手をし始めたら
最初にサイト全体のテーマのテンプレートを
選択するトコロで躓いた・・・ヾ(・_・;)ぉぃぉぃ

まさかの1番最初の部分で
こんなに延々と時間がかかるとは・・・バタリ ゙〓■●゙

デザインやレイアウトに拘りがあって
しかもそれが一般的な作りではなかったのだ

近いだろうテーマのテンプレートを選んで
管理画面の簡易カスタマイズツールから
できる範囲で寄せてみても
完璧ではなければNGだ

NGになった箇所は
簡易カスタマイズ可能な範囲を超えてるので
コアな部分を弄らなくてはならなくて
そうなるとフツーにHTMLでサイトを作成してれば
1時間もかからぬ作業でも
丸1日かけて取り組まなくてはならなかったりで
場合によってはもっとかかるかもしれず
果てしなく時間を食うし
手間はかかりまくるw

しかもそれが見栄えだけでなく
動作にまで及んでるとなると
別途、ローカルでテストサイトを構築しておいて
動作確認してからアップする必要もあって
時間も手間も気が遠くなるほどかかってしまうのだ

デザインに絶対的な拘りが無ければ
あっても規格内であれば
こちらで要望に近いテーマを3つくらい探して
どれかに決めてもらえたら
ハイ、出来上がり♪・・・なんだけど^^;

まあクリエイターさんというのは
独特の世界観があってこそなのだろうから
これと決めたデザインしか受け入れられナイのだろうし
それが規格外なのもクリエイターさんらしいwww

そこにどう対処してくべきかは
当初、WordPressのテーマの限界を超えるのも
面白いし、ありかもと思ってた

だがしかし
更新が必須と思われる作品一覧ページの表示の仕方が
WordPressでやるとしたら
プラグインを自作するしかなさそうで
そこまでやるのはどうかと迷いが生じた

いや、むしろそこまで無理してWordPress使わなくても
HTMLで1ページづつ作った方が断然速いし
更新に関しては部分的に
例えば、画像アップとかに特化して
WordPressに頼って
HTMLページとは分けて使った方が
良いような気がしてきた

ギャラリーのデフォルト機能でも
思った以上に色々できるけど
それでもサムネイルのサイズは統一されるし
サムネイル同士の間隔は狭いか殆ど無いレベルで
プラグインでも無料の場合
きちんと並ぶのはむしろ保証しよう

それを間隔を空けて
サイズもランダムに表示するって
要するにきちんと表示する機能に対して
バラバラに表示されるように弄るってのは
なんだかな~><

でもこういう時につくづく
自分は奔放なクリエイターには向いてなくて
生真面目にサイトを作る側の人間なんだと
深く頷いちゃうワケだけどね^^;

とにかくWordPressを
そのまま表示に使うのは止めた!

一つ下のディレクトリに入れ直して
ページはHTML5でベタに1ページづつ作成して
データベースからデータだけ拾って
表示するようにしようかと!!

トップディレクトリより1つ下のディレクトリに
WordPressをインストールしといても
設定を変更すればトップディレクトリからでも
WordPressの直接表示もできるし
とにかくWordPressをインストールするのは
とりあえずトップディレクトリでなく
1つ下のディレクトリにすべきだと学んだ
その方が融通が利くからね

個人サイトの作成に必要最低限の要素って
一昔前までは以下のようなモノだった

  • タイトル
  • キャッチコピー
  • トップ画像
  • ロゴ画像
  • プロフィールページ
  • メニュー別コンテンツページ

そもそもサイトを作成するのは
メニュー別コンテンツページを作るのが目的なので
他の要素はそれに付随する情報でしかナイ

でもSNS全盛時代になってみれば
肝心のコンテンツが無くても
個人のSNSのまとめページのような作りで
成り立つようになった気がするるる~

まあかく言う自分もそうしてる一人だがねw

いや、自分のサイトの場合は
特異的なコンテンツのサイトがメインで
ググってヒットしたから見に来てるって人が多く
SNSで身内中心に宣伝したトコロで
一般的に誰もが読みたいような記事でもなく
個人サイトのトップページには
一応、Twitter(アメブロ更新情報)を表示してるが
SNSでのリアルな繋がりは
むしろ自分の趣味の世界とはかけ離れてるので
Facebookやmixiはリンクしておらず

とにかく個人ブログが一般的になる前は
個人サイトはコンテンツありきで
1ページづつコツコツ制作してって
ある程度の読み応えのあるページ数になってから
やっと公開して
以降、せっせとコンテンツを更新するのみだった

でも今はコンテンツ中心のブログもあるが
個人の日記的ブログになってるので
もれなく特異的な単語が含まれてナイ記事には
ググってヒットするワケもなく
そうなると宣伝のためのSNSは必須だし
Instagramなんかは
それ自体がメインコンテンツだったりもして
リンクを張るのは当然ながら
ウィジェットで表示しておくなんてのが
親切な見せ方かもしれぬ

手前味噌ばかりでなんだが
自分の場合は登録だけしてても
Instagram、Pinterest、Tumbler、etc.etc.は
もう更新予定が無いので
これらもリンクからは外してて
Twitterのウィジェットだけを表示してるので
結局、SNSのロゴマークを
1つもサイト内に表示してなかった
(今時、ありえん仕様だなw)

これがクリエイターサイトともなれば
コンテンツありきでも売買が絡む場合には
個人のSNSなんかも必須になるのは
SNSで人となりがわかれば
購買意欲にも繋がるからだろうし
単に信頼おけるかどうかの目安になるので
わかり易く表示する必要はあるだろうと
ちゃんと対応を考えてはいた

SNSを提供してる各社には
ブランドリソースなるページが必ずあって
ロゴ画像ファイルが入ってる圧縮フォルダ(zip)を
ダウンロードして使用するコトができるので
ブランドリソースのページがどこにあるか
予め探しておいたのだ

Facebook
https://ja.facebookbrand.com/assets/%E3%80%8Cf%E3%80%8D%E3%83%AD%E3%82%B4/?audience=landing

Instagram
https://en.instagram-brand.com/assets/icons

Twitter
https://about.twitter.com/ja/company/brand-resources.html

これらをダウンロードして
改変せず使用するのを各社が推奨してるのは
ブランドイメージがあるので
それを勝手に変えて使われてしまうコトで
イメージが損なわれるのを防ぎたいからだろう

色番号とか余白にまで細やかに規定があって
それを順守して使わせてもらうのだが
だからWordPressのプラグインで使われてるロゴも
そうした正規の画像だと思われ

実際、WordPressのプラグインで
簡単にウィジェットで設置できたので
それですっかり満足して
自信満々で依頼者に作業完了を告げると
意外な返事・・・!

「色はグレーにしてください」とな?!

さすがクリエイターさんは発想が自由なのだ^^;

ブランドロゴには規定があるるる~
との説明はしたものの
作品以外をモノトーンでまとめたいって
サイトのコンセプトがあって
ぶっちゃけ、SNSを提供してる各社のブランドイメージより
自身のサイトの全体イメージの方が大切
というコトなのだろうな^^

自分には微塵も無い発想だったので
感心しながらロゴ画像を内緒で加工してみた
(って、ブログに書いたら内緒でなくなったがw)

これをサーバにアップして
カスタムHTMLウィジェットから呼び出すと・・・

こんな風に表示された

OKが出たのでこれで行こうォゥ( -∀-)/

hetemlサーバでは
独自ドメインに無料SSLを設定できるも
コンパネから操作したトコロで
すぐには反映されぬp(-_-+)q

切り替わるのを待ってる間に
WordPressをインストールしたが
し終わってもまだ切り替わらずにいて
不安になって確認してみたら
「SSL設定中」の表示は消えてるし
入れたはずのチェックも付いてなくて
変だと思ったら痛恨のミス!

ムームードメインの設定を間違えてた!!

ドメイン luka.website は
メインで使うからもちろんなれど
サブドメインの www.luka.website も
使わなかったとしても
hetemlに差し向けておかねばならなかったのだ

こういう顧客のニーズを無視した
融通の利かナイ独自設定を無理強いするコトで
コストダウンが実現してるのだろうから
逆らうつもりもなかったけどね

だがしかし・・・
そうと知らずにマニュアルとは違う設定してしまって
でも別に設定自体が間違ってるワケではなくて
その設定が無視されると知らなかっただけってのが
なんか腑に落ちなかったりするるる~

まあタダより高いモノは無いってね
最も貴重な時間を無駄にしたわ

そこに気付いてから
再度、「独自ドメインに無料SSLを設定」に
チェックを入れて待ってると
今度はSSLがちゃんと設定されたヽ(´▽`)/

WordPressのメニューから[設定]⇒[一般]で
WordPress アドレス (URL)とサイトアドレス (URL)を
以下のように変更

http://luka.website/ ⇒ https://luka.website/

サイトがSSLで表示できるようになったので
テーマ(デザイン&レイアウト)を
要望に近い雰囲気を探してインストール

Simple White lite

簡素な見た目が要望だったので
デザインが殆ど施されてなかったのをチョイス

なるほどシンプル・ホワイトだけあって
コンテンツが無ければ
真っ白で何が何だかわからん画面w

なので、サンプル画像を作成して入れてみたが
コンテンツが揃えば
ちゃちゃっと出来上がりそう^^

縁あって
お友達のサイトを
作らせてもらうコトになったので
このブログに手順を残しておこうと思う

サイトを作るのに必要な時間は
規模にもよるけど
WordPressを使えば
その日の内に公開も可能だろう

必要なモノはネット接続可能なPCで
まずはWEB上から必要な契約をするるる~

必要な契約は2つで
ドメインサーバだが
これがセットになってる場合もあって
値段はピンキリだ

ちなみに
サーバがネット上の住まいとすると
ドメインはネット上の住所

ドメインは自分の場合
asena.siteってのをメインで使ってて
これはムームードメインで取得したが
費用は年間で¥100もせずw

ムームードメインで探せば
¥100未満/年のだってあるから
きっとお得なドメインが見つかるだろう

サーバは自分の場合
実は今は過渡期で3つも契約してて
中でも年間で¥1200と破格の安さだったサーバは
これでWordPressも使えたのだが
今はもう新規契約しておらず

もう一つはlolipop(ロリポップ)でもう10年以上使ってるけど
月額¥250でWordPress使用可だ

そして最近契約したばかりのheteml(ヘテムル)
月額¥800で当然、WordPress使用可

lolipopもhetemlも
マルチドメインと言って
1つのサーバを複数ドメインで使えるのだが
その設定をするのにも
ムームードメインだと簡単なのだ

ドメインとサーバが契約できたら
まずはサーバ(今回はheteml)の設定だ!

1.FTPアカウントの設定

サーバとPC間のファイルのやり取りに
FTPを使うのでこのアカウントを
コンパネから設定する

設定したら通常はFTPソフトに
FTPサーバ名、FTPアカウント名&パスワードを入力して
FTP接続ができるようにするのだが
WordPressでサイト作成する場合には
初期設定くらいでしかFTPを使わナイので
hetemlのコンパネからのFTP接続で十分かと思われ

その場合、サーバ名は自動で接続してくれるので
アカウント名とパスワードだけメモしとく

2.FTPからサーバ領域を作成

hetemlのコンパネからFTPを開く

webフォルダを開く

lukaフォルダを新規作成

3.lukaフォルダにドメインluka.websiteを設定

ドメイン・メール設定⇒[独自ドメインを設定する]

ドメイン名とフォルダ名を入力

http://luka.website/ が一覧に表示されたら⇒[詳細を見る]

ムームードメインのコンパネへ

ムームードメインのコンパネで
ドメインをサーバと紐付け

hetemlのコンパネに戻って⇒[詳細を見る]

無料独自SSLを設定するにチェックすると
https://luka.website/ が使えるようになるが
設定に少し時間がかかって
その間、一覧には「SSL設定中」と表示されてて・・・

設定が完了すると「無料SSL」と表示される

と、ちょっと長かったけど
今はSSLがデフォなので
サーバの初期設定はここまで必要だ

サーバの設定が終わったら
次はWordPressをインストールだが
hetemlサーバはコンパネから
簡単インストールの機能が使えるるる~

HetemlサーバでWordPressを簡単インストール

今回、PHPを学び直したいと思った
1番の理由を突き詰めると
実はPHP5とPHP7の違いってより
これまではPEARライブラリを活用してたのが
これから使ってく自信を失ったせいだ

今年になっていきなり
GIGAZINEの記事で良からぬニュースを読んで・・・

PHPライブラリサービスの「PEAR」でセキュリティ侵害が見つかる

その後どうなったのかと気になってたら
下記の記事が決定打となって・・・

PHP7.4ではPEARがインストールされなくなる

PEARとの決別を決心!

そもそもサーバのPHPを5→7にしたら
それまで表示されてたモノが
空白になってしまったのが発端で
それと言うのもどうやら
MySQLからデータを拾ってこれなくなったようで
その時点でPEARを使い続けるかどうか
既に答えは限りなくNOに近かったのだがね

そういうワケで
MySQLからデータを拾ってくるのに
PEARを使わずにやるってのが
1つ目の課題

WordPressからアップした以下の投稿の本文を・・・

人間は考える葦である

別サイトの次の該当ページに表示したいのだ

筑摩世界文学大系【13/19】デカルト パスカル

以下の書籍のP212~を参考に・・・

よくわかるPHPの教科書 PHP7対応版

まずはデータベース接続のための共通プログラム
dbconnect.phpを作成

<?php
try {
    $db = new PDO('mysql:dbname=データベース;host=接続先ホスト;charset=utf8', 'ユーザ名', 'パスワード');
} catch (PDOException $e) {
    echo 'DB接続エラー:'. $e->getMessage();
}
?>

WordPressの記事の
タイトル(post_title)と本文(post_content)は
同じ wp_post テーブルにあるので
そのテーブルの該当記事のIDを指定して
1行分のデータを取得して
表示するためにHTMLから呼び出す

<div class="wp">
<?php
    require('dbconnect.php');

    $contents = $db->query('SELECT * FROM wp_posts WHERE ID=1'); // ID指定
    $contents->execute();
    while ($row = $contents->fetch()) { // 1行分のデータ取得
?>

<h4><?=$row['post_title']?></h4>
<div class="wp_post"><?=$row['post_content']?></div>

<?php
    }
?>
</div>

WordPressの記事がHTML内に表示された♪

こんな簡単でいんだ?!

なんだ、PEARなんか全然必要なくね?

個人サイトは
これまでもちまちまと
作成してはきたが
プロバイダーが変わったり
ブログシステムがなくなったりで
とりあえずダウンロードして
サーバに放り込んであるって状態

それなりに読める記事もあるが
画像のリンク切れが凄まじかったり
記事同士も孤立してたりだ

退職したらとりかかろうと
ずっと放置しておいたが
還暦過ぎても働いていそうな自分が
予想出来てきたので
ここいらでなんとかしようかと・・・

とにかくこの1年くらいで
まずレンタルサーバを
1つにまとめる予定
(マルチドメインで
ドメインはいくつか使うけど)

メインのライフワークのサイトは
https://tan-deki.heteml.net/

サイトの全体像は以下

WordPressに記事を書いてって
そのデータベースから
関連記事を表示する仕組み

基本的には書籍毎に
1ページ使って記事にしたいのだが
書籍同士がリンクし合ってたり
または似たような内容の書籍だと
複数冊の書籍に共通してる内容があって
それを何冊(ページ)分も
1つ1つ同じような内容を書くのは
手間だし、バカみたいだ

なので
WordPressで作成した記事が
データベースにあるのを
それぞれのページで
必要に応じて表示するってワケだ

もう1つは
自分と家族のために
うちの猫らの写真や動画を
見るためのサイト

https://asena.site/hachikuma/

と言うか
デバイスに溜まってく一方の画像と動画を
サーバにアップしておいて
それらを簡単に管理できる上記サイトだけでなく
そのサイト構築の手順や
他に手掛けたサイトについてのメモ的な
WEB備忘録をWordPressに残そうと
このサイト(WEBLOG)を作成

HTML5、CSS3、PHP7辺りで
やる度に忘れててググってるコトや
新しく覚えたコトを
未来の自分のためにメモ

そういうサイトもこれまでやってたけど
もう10年以上前の記事なんて
内容が古過ぎて使えなくなってるから
この機会に新たに仕切り直して
ここでやろうかと!

このWordPressではコードを書くので
使い慣れてたプラグイン
SyntaxHighlighter Evolvedを
インストールしようと思ったら・・・

このプラグインは現在使用中の WordPress バージョンではテストされていません。

Σ(゚д゚lll)ガーン

それでも最終更新日が4ヵ月前だったので
とりあえず入れて設定してみた

試しにPHPでの年齢の自動表示のコード

<?php echo floor((date('Ymd') - 19680820)/10000); ?>

ちゃんと表示できてるるる~

2つ前の記事で
URLの先頭に来るhttpもしくはhttpsの
通信プロトコルをhttpsに設定したので
ついでにURLの表示の仕方も設定

デフォルトでは日本語のタイトルが
そのままURLに使われてしまうし
その前に投稿日時の表示も入るので
シンプルなキーワード(英語)のみで
表示できるように設定したい

まずは投稿一覧から
表示に使うシンプルなキーワード(英語)を
各記事に設定しておく

記事タイトルの下にカーソルを移動させると
以下が表示されるるる~

編集 | クイック編集 | ゴミ箱へ移動 | 表示

[クイック編集]を開くと
タイトルとスラッグが同じになってるか
サンプルを編集した記事ならば「hello_world」となってる

スラッグの方を
数字、アルファベット(は小文字に変換される)と
ハイフン、アンダーバーで
シンプルなキーワードに書き換え

全部を書き換えたら
全体のパーマリンク設定

[設定]→[パーマリンク設定]

デフォルトでは日付と投稿名

投稿名を選択して
[変更を保存]ボタン

これ、新規投稿の際には
タイトルのすぐ下のパーマリンクから設定可

[編集]ボタン

書き換えて[OK]ボタン

WordPressのユーザー名は変更不可なれど
表示名は変更できるるる~

メニュー[ユーザー]→[あなたのプロフィール]

開くと確かにユーザー名は編集できなくなってる

ニックネームの欄に表示したい名前を入力すると・・・

すぐにブログ上の表示名に反映するので
表示したいニックネームの方を選択

[プロフィールを更新]ボタン

数記事投稿してみると
どう表示されるかがわかってきて
設定し直したい部分が色々出てくるるる~

このWordPressは
超テキトーに始めたので
タイトルもとりあえず「qwerty」

しかもユーザ名も同じ「qwerty」

まずはタイトルを変更するのに
メニューの[設定]→[一般]

一般設定画面が開く

こんなカンジに書き換えてみよう

最下段にある[変更を更新]ボタンの前に
サイトのタイトルを入力しただけで
上の黒いバーには
新しいタイトルが表示された(゚ ゚;)おぉ!

キャッチフレーズをちゃんとして
アドレスはhttps://~に変更

Hetemlサーバは登録時のドメインなら
今は何もしなくてもhttps://~が使えるし
後から設定する独自ドメインでも
設定画面から設定するだけで
https://~が無料で使えるるる~