WordPress再導入後①

WordPressアイコン

他の関連ページ
WordPress
WordPress - 再導入後➁
WordPress - MySQL データベースの修復
WordPress - Lightning

以前から使用していたXAMPPのMySQLでWordPressを導入し、一週間ほどテストしていたら、突然MySQLが異常終了し立ち上がらなくなった。 どうやらデータベースが壊れたらしい。

現役の頃経験した、リレーショナルデータベース(RDB)のエラーは回復困難と判断し、XAMPPのバージョンもコロナ以前のものだったので、この際全部再導入することにした。

RDBは、正しく終了させないと予期せぬエラーが発生するなどデリケートである。XAMPPのコントロール画面はWindowを閉じても、ApacheやMySQLなど一旦Startしたアプリは同じControl PanelでStopしない限り動いている。

XAMPPは無償で提供されていて、開発・学習用としては重宝されるがあまり安定していないような気がする。自分の環境ではWindowsに最初から組み込まれているセキュリテイソフトWindows Defenderとは相性が悪いようで、途端にパソコンが重くなったりする。　

再導入の前に、XAMPPのこれまでのバージョンをアンインストールし、ユーザーファイル「htdocs」はバックアップとして保管し、必要に応じて新しいhtdocsに移行する。

次の参照したサイトがとても丁寧に説明しており、ほぼこの通りでXAMPPの導入からWordPressの環境を構築できた。
　ハズ部 : XAMPPを使ってWordPressローカル環境を構築する全手順

MySQLデータベースのバックアップのとり方。http://localhost/phpmyadmin/でlog on する。そのうち実際の作業が必要になった時にレポートする。
　【PHPMYADMIN】データベースのバックアップはこまめに取っておこう【MYSQL】

以下、気が付いたところを記述しておく。

*(画像を拡大するには写真上で右クリックしブラウザの「新しいタブで画像を開く」を選んでそちらのタブを表示)

• 再導入しWordPressにログオンした画面

• CocoonとCocoon Childのpluginを追加したあと、Coccon Child を使う
• スキンリストの画像のiconにカーソルを置くとサンプル画像が表示される
• 表示されるスキンから好みのものにチェック

• プラグインはzip形式でダウンロードされるので、解凍せずに「ファイルを選択する」で指定し導入する。

• ホームページは圧倒的にタブレットやスマホでみる人が多い
• パソコン画面は横長でスマホ画面は縦長で見られるため、パソコンでは整列して見えてもスマホでは小さすぎるか崩れることがある。どちらでも見栄えをよくすることをレスポンシブwebデザインと呼ぶ
• Cocoonはこれに対応している
• ライブプレビューなどで左下のパソコン、タブレット、スマホの小アイコンが表示された場合、それぞれのメディア機器での画面の見え方を知ることが出来る

• スマホ画面の表示

• スマホ画面の表示の下部分
• サイドバーはアイコンに含まれた

• サイドバーにカテゴリーを追加する例
• 「外観」から「ウジェット」選びウジェット画面へ
• ウジェット画面で左の「利用できるウジェット」欄から右の「サイドバー」へドラッグする 　　
• 各ウジェットの追加ボタンからでも追加できる

• サイドバーにカテゴリーが追加された

• 投稿を最初に固定するには、「ブログのトップに固定」にチェック

• 投稿時にアイキャッチ画像を設定しないと、NO IMAGE などのデフォルト画像が表示される
• 「Cocoon設定」, 「画像」の「NO IMAGE設定」で「アイキャッチの存在しない投稿のサムネイル画像設定」ができるとあるがエラーになる。そのうち修正されると思うが、メディアに適当な画像を用意しておいて都度指定するのが簡明。

• 問い合わせ用のコンタクトフォームの設定手順
• ダッシュボードの「プラグイン」、「新規追加」の右上のキーワード欄にcontact と入力すると「Contact Form 7」が出てくる
• 「今すぐインストール」、「有効化」で問い合わせが左の欄に表示される

• 「新規追加」で問い合わせで表示されるフォームを設定する
• この画像ではすでに作ってあるので「コンタクトフォーム1」の編集をクリック

• コントタクトフォームが作成されるとショートコードが表示されるので「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください:」の下にあるコードをコピーしておく 　　
• [contact-form-7 id="1b877ed" title="コンタクトフォーム 1"]ブラケット(カッコ)までコピー
• マウスではコピーできない場合は、ctrl+cのショートカットでコピーし、ペーストはctrl+vで行う

• 固定ページに[contact-form-7 id="1b877ed" title="コンタクトフォーム 1"]を貼り付ける
• 右上の「更新」を押す

• ホーム画面の「問い合わせ」からの表示

• メニューバーの「ホーム」と文字表示されている。これをアイコン表示したい 　　
• 前提として、Cocoonの「全体」の設定にデフォルトのサイトアイコンフォントで 「Font Awesome 4」が指定されている

• プラグインを追加で、「Font Awesome」で検索 　
• Font Awesome が最初に表示される
• Font Awesomeのプラグインを「今すぐインストール」、「有効化 」
• ダッシュボードの「設定」に「Font Awesome」が追加される

• Font Awesome4のサイトを開き、上のSearch icosn欄に「home」といれ、表示されたhomeのアイコンをクリック
• 表示されたhomeアイコンの画面から< i class="fa fa-home" aria-hidden="true"></i>をコピーする

• ダッシュボードの「外観」、「メニュー」でメニューの構造が表示される
• 「ホーム」を開いて(逆三角マーク)「ナビケーションラベル」に先ほどコピーした< i class="fa fa-home" aria-hidden="true"></i>を貼り付ける
• ホームという文字の前にアイコンを表示したい場合は文字の前に貼り付け、文字が不要であれば全部上書きする
• 参考) aria-hidden 属性は、要素が非表示であることをブラウザーに伝える。 aria-hidden="true" を指定された要素は、スクリーンリーダーに読み上げられない

• ホームがアイコン表示に変わった

ホームページの作例を見ていると、華麗にトップページが変化するなど手の込んだページを見かけるが、いうまでもなくホームページの目的は、コンテンツの出来具合であってホームページの見栄えではない。

シンプルで見やすいホームページを作って公開するには、WordPressは使い勝手がよい。SNSで投稿するとか文書作成アプリを使っている感覚でサクサク作れる。どこかの仕様の変え方も慣れてくると容易になる。 何よりも、多くの人が使っているのでほとんどの疑問や、問題の解決の仕方が検索すると出てくる。