ホームページの立ち上げ
WordPress+Lightningで作成した時の事
エピローグ
今回ホームページを開設するにあたり息子に相談すると「WordPressが良い」と勧められ、○ゾンで “ いちばんやさしい・・・・・本格Webサイトの作り○ ” という人気No1との触れ込みの本を買い、とりあえず “ InstantWP ” で疑似HPを立ち上げて、あれこれやって何とか形にしました。
そのため「テーマ」は、その本にあった「Lightning」です。
レンタルサーバーを立ち上げインストールし “ 開設 ” となった時、そのままでは「アップデート時に書き換えられる可能性が高い」ことが解り、ひと月半の苦労が水の泡になってしまいました。
三度目の作業なので、作業は早くはなっていますが、何が「本格Webサイトの 云々」だ、頭に来ます。そうです「じさま」は気が短くなっているのです。
こいつら（3人の著者）絶対に許さん！！
上記を踏まえ、これからホームページを立ち上げてみようと思われている方達及び健忘録として記事にしてゆきます。あくまで「WordPress+Lightning」でのものになりますが、参考にしてください。
自分でできるかどうかの確認には「InstantWP」が良いと思います。動作（立ち上がり）は異様に遅いときがありますが、サーバーを用意する必要がありませんので、後で「やっぱりやめた」となった時の痛手が少ないのです。
重要！！後で泣かないために「子テーマ」使用の事
「WordPress」のインストールおよび設定等は、多くの記事がありますので諸兄を参考にしてください。
「WordPress」が立ち上がり、テーマを「Lightning」に設定しますが、すぐに作業に入らず「Lightning」の「子テーマ」を設定し、実際の作業はこの「子テーマ」で行うことになります。私は日が浅いためまだ遭遇していませんが、「WordPress」や使用しているテーマ「Lightning」がバージョンアップで、それまで作っていた物が壊れることがあるらしく、後で泣かないためには必須の方法らしいです。
このことを書かないで「本格Webサイト 云々」とはおこがましい本です。
「子テーマ」のインストール＆設定についても、数多くの記事がありますので、参考にされてください。
使用プラグイン
タグを駆使して描かれる方はあまり必要無いのかもしれませんが、私のような「素人のじさま」では思ったことが出来るようにするためには必須です。
私の使っている「プラグイン」は下記の物ですので、参考にしてください。「プラグイン」を入れすぎると動作が重くなるとのことですので、状況により選択してください。
Akismet：WordPressに最初から入っています。よくわかりませんが、「スパム」という物から守る物とのことです。
WP Multibyte Patch：WordPressに最初から入っています。Wordpressの日本語化用とのことです。
Ligthning Advanced Unit：テーマをLightningにすると最初から入ってきます。よくわかりません。
VK All in One Expansion Unit：テーマをLightningにすると最初から入ってきます。よくわかりません。
Akismet Anti-Spam：定番らしいです。よくわかりません。
Contact Form 7：定番らしいです。でも安定性では「Googleフォーム」の方が良いとのことですので、近々変更予定です。
HTML Editor Syntax Highlighter：WordPressのテキストエディタでHTMLを見やすくする物です。私は見にくく感じるのですが・・・・・。ま素人の私はよほどの事が無い限り「ビジュアルエデター」を使用していますので、関係ないのですが。
Jetpack by WordPress.com：入れといたほうが良いとのことなので入れています。設定が多すぎてよくわかりませんが、他のプラグインと機能が重なっているようないないような・・・・・
TinyMCE Advanced：WordPressのビジュアルエディタに機能追加する物です。
TinyMCE Clear Float：TinyMCE Advancedに機能追加する物です。画像への文書回り込み解除を、ワンクリックで行う機能の追加用です。
Japanese font for TinyMCE：TinyMCE Advancedに日本語フォントを追加する物です。「游ゴシック・明朝」を使いたくて入れましたが、結局入っていなかったので別の方法がうまくゆけば消す予定です。
BackWPup：WordPress定番のBackUpプラグインです。基本はサーバーへのバックアップですが、何かあったら怖いので、とりあえず自宅のNASにも5回分はバックアップしておくつもりです。
All in one SEO Pack：定番らしいです。入れただけではだめで設定しろとのことですが、結構設定項目が多く、諸兄のページを見ても画面が違い切り張り状態で使用しています。出来るだけ最新記事を探して参考にする必要があるようです。
Enhanced Media Library：WordPressは使いやすいと思いますが、画像の管理が一元的でファイル数が多くなると管理が大変になると思い入れました。一般的には「フォルダー」分けが解り易いのですが、Googleの考えが「画像は一元管理を推奨する」とのことで、「カテゴリー」で分けるプラグインを選択しました。
Easy FancyBox：画像のポップアップ用プラグイン。ギャラリーにも対応しています。これで細かい画像でも見やすくなると思います。_2018.04.21追加
カスタマイズ
使い勝手を良くするために、私が行った作業です。今後も少しづつ増えてゆく可能性がありますが、まずは以下の事を実施しています。
いろいろなサイトを読ませてもらいましたが、「初心者用」と書かれていても「CSS？HTML？」の「ボノボノ」状態（古臭い）の「じさま」には、「何をどうすればいいのか」わかりませんでしたので、順を追って作業を書いておきます。
どうも「CSS」で「関数（命令）」を作り、「HTML」で実行するという流れのようです。ただやってみると「子テーマ」でいじっても反映されたりされなかったりがあり、よくわかりません。
固定ページにブログを表示させる方法
様々な方法があるようですが、私のホームページで行っている方法を紹介します。ズブの素人が行っている方法ですので、スマートではありませんが、曲がりなりにも動いています。
使用しているテーマは「Lightning」です。3PRにある固定ページの内1PRを「ブログ」用にしたく、試行錯誤した結果です。
- 「ブログ」にしたい親固定ページを決めます。
- 決めた親固定ページの下に「ブログ一覧」とした、何も記事を書かない子の固定ページを作ります。但し、このページには親固定ページの指定はしません。
例) パーマリンク：http://xxxxx.yyyy.net/blog-list/ として「ブログ一覧」を作成
3PRのリンク先ページのURLをhttp:// xxxxx.yyyy.net.net/blog-list/とし、「リンクを別ウィンドウで開く」に✔を入れる。
- 3PRにあるブログに指定した固定ページを作り
・公開する。
・外観→メニューでメニューを新規追加、「ブログ一覧」等とし作成し、3PRにあるブログに指定した固定ページ「ブログ」をメニューに追加する。
- 表示設定
ダッシュボード → 設定 → 表示設定
フロントページの表示を「固定ページ」に設定。
・フロントページを3PRでブログ用に作った名称を指定する。
・投稿ページに作成した「ブログ一覧」を指定する。
- 固定ページの一覧を開き、3PRでブログ用に作った名称のパーマリンクがトップページになっていることを確認する。
※この時
「ブログ」；http:// xxxxx.yyyy.net/（トップページに設定）
「ブログ一覧」；http:// xxxxx.yyyy.net /blog-list/（投稿ページに設定）
共に「挿入アイテムの設定」＝全てチェック無し、「固定ページの属性」＝親無し、デフォルトテンプレートとします。
※ これで固定ページをクリックすると「ブログ」に飛び、「投稿」したブログのタイトルと見出しが「ブログ一覧」のページに表示され、記事をクリックするとその記事に飛び表示されます。
背景色の変更方法
Lightningを使っていると背景色が味気ないと思い実施しました。
ダッシュボード＞外観＞CSS追加と入ってゆきます。
左下に「」と出てきますので、デフォルトの表記を消し去り
body,
header,
nav ul li a {
background-color:#xxyyzz !important;
}
と打ち込みます。この時「#xxyyzz」が背景色になります。私は「# ccfcab → f2fbef」にしてみました。値を書き込むと色が変わりますので、確認しやすいです。色情報は「Web 色」等で情報が得られます。
確定後 上にある「公開」をクリックし終了です。
※ 2018.04.20；カラーNoを＃ecffbcに変更しました。
日本語フォントを記事内容で使い分けする。
初期設定のフォント「メリオ」は見やすいのですが、ちょっと軽い感じがしました。記事の内容によってフォントを変更したく実施しました。追加するフォントはPCが持っているフォント「游ゴシック」を使いたいのですが、試行錯誤しましたがうまくゆきません。動作が重くなるとのことなのでWebフォントはどうかなと思うのですが、変更する「固定ページ」を強引に比較的に堅いと感じる「Noto Sans Japanese」へ変更しました。
方法は「TinyMCE Advanced＋Japanese font for TinyMCE」を使い、ページの記事全体を選択して変更しました。テキストエデターを見ると非常に汚いのですが、変更したいページはこれだけですので、これで良しとしています。
他の変更方法が見つかれば、もっとスマートな方法を試すつもりです。
記事の文章にリンクを貼る。；2018.04.22追記
よく見る記事内の該当文字にリンクを貼る方法です。文章内の該当文字にマウスカーソルを当てると文字色が変わり、そこでクリックすると該当ページに飛ぶという方法です。至極当然のようにやっておられますが、全く方法が解らず、おまけにどのように探せばよいかわからなかったのですが、やっとできるようになりましたので、追記しておきます。ただ「ビジュアルエデター」のやり方で、「テキストエデター」でのやり方は分かりませんのであしからず。
1．文章内の該当文字列を、マウス左クリックでドラッグして反転します。
2．「リンクの挿入/編集」をクリックします。
3．表示された中の「歯車マーク」（リンク設定）をクリックします。
4．表示された中のリンク先に該当するURLを打ち込むか、下に表示されるリンク先から目的の記事をクリックします。
5．リンク先を確認して、「リンク追加」をクリックします。
6．ビジュアルエデターに戻ると、選んだ文字列の色が変わっていてリンクが設定されています。
これで完了ですが、外部リンクの場合リンク先への「リンク確認」は礼儀だと思いますので、各人の判断でお願いします。
今後の課題
画像挿入時の文章回り込み制御
画像を挿入した時に文章を画像横に回り込みさせる機能が標準でありますが、文章が長いと画像の下に回り込んでしまいます。これを指定したところまでは画像の下に回り込まないようにしたく思います。いろいろ調べて試していますが、素人の「じさま」ではまだ解決に至っていません。何かプラグインがあればよいのですが・・・・・
記事全文のフォント変更
先にも述べましたが、標準のフォント「メリオ」を使っていますが、その記事だけを別のフォントに変更したい時があります。プラグインまたは簡単な方法を探しています。← 一応解決 2018.04.27
まだ 始めたばかりなのでこれぐらいですが、そのうちいろいろと出てくると思いますが、今後 諸兄の情報を基に使い勝手の良い物にしてゆきたいと考えています。
その後のカスタマイズ
記事内のフォント変更_2018.04.27追記
プラグインTinyMCE Advancedに日本語フォントを追加するアドインJapanese font for TinyMCE を追加することで一応解決。
でも
游ゴシックが無い。
記事全体を変えるには、全ての文字をドラッグして変更しなければならない。
等の不満があります。何とかしたいので、息子に発注済みですので、解り次第追記します。
段落の文字を何文字か下げたい。_2018.04.27追記
WordPressで段落を付け、最初の文字前に空白をいれたくてもビジュアルエデター丈は思った通りになっていても、いざプレビューすると文字を落としたことが反映されていません。「会社概要」を書いている時、一段下げて表示したいこともあり、色々試してみましたが、やっと何とかなりました。
試した方法は
- HTMLをいじる：やってみましたが、文字は下がりますが、最初の行の前が異様に空き、書かれている解決方法を試してもうまくいかず却下。
- CSSをいじる：訳が分からないので、即刻パス。
- プラグインTinyMCE Advancedの設定を変更する。
の３つの方法が有りましたが、プラグインTinyMCE Advancedの設定を変更することで解決できました。
方法
ダッシュボード＞設定＞TinyMCE AdvancedでTinyMCE Advancedの設定を開きます。（環境によって設定の変更方法が違うかもしれません）
下の方にある「高度なオプション」に行きます。
「段落タグの保持」に✔を入れます。
右下の「変更を保存」をクリックして終了です。
結果
プレビューを確認してみると、思った通りになっています。
これで簡単に思い通りの文章構成が出来るようになりました。
WordPressのバックアッププラグインBackWPupの不具合_2018.07.04追記
先日ブログでも書きましたが、バックアッププラグイン「BackWPup」BackWPupが「バックアップはとれるが、PCへダウンロードできない」できないという症状が続いています。プラグインのバージョンアップを待ってVer3.6.0にしましたが改善されないため、何か別の方法を取らなくてはならなくなりました。
当初別のバックアッププラグイン「UpdraftPlus Backup」に変更するつもりでしたが、ある記事によると「状況にもよるが、ファイルがとてつもなく大きくなる。」とありましたので、プラグインを変更せずにバックアップを取れるようにしてみました。
方法はバックアップを一度クラウドストレージに保存し、そこから再度PCにダウンロードするという二度手間で対応してみたところ、何とかバックアップファイルを保存できるようになりました。
バックアップ先は「Google Drive」にしようと思いましたが、無償版の「BackWPup」では「Google Drive」が使えないため「DropBox」にしました。「DropBox」無償版の容量は2.5GBですが、一回のバックアップファイルは500MB程度ですので、3回分を取るようにしました。バックアップはバージョンアップ前と記事のアップ後に手動バックアップをし、スケージュールで週に一度自動バックアップを行うようにしました。
これで6月末に起きたホームページ消滅のような事態にも備えられるようになり、ひとまず安心です。