WordPress Twenty Seventeen
ブログサイトの構築と運用 メモとノウハウ
ブログサイトの構築と運用 メモとノウハウ
WordPress 4.8 Twenty Seventeen 以降を前提に記載している。
目 次
スポンサー リンク
Raspberry Pi でWeb Server を立ち上げ、ホームページを公開して1年余りになる。Apache ではなく、 nginx + php5-fpm それに mysql-server + php5-mysql というソフトの導入に悪戦苦闘し、Web Server なるものを構築。その中にコンテンツをコツコツと手作りで増やし、ホームページを作成してきた。
今まで、思いを巡らせ構想してきたデザインと構成で、貯めて来たコンテンツをHTMLとPHPで一通り遺すことができた。そして、セキュリティに関する備えが十分かどうか懸念を抱きながらも、ドメインを取得し公開までこぎつけた。
幸いレスポンスやセキュリティーに関する問題もなく、24時間365日システムダウンすることもなく稼働しており、何時でも、どこでも、モバイル機器から参照できる備忘録として、この上ない利便性を享受している。
幸いレスポンスやセキュリティーに関する問題もなく、24時間365日システムダウンすることもなく稼働しており、何時でも、どこでも、モバイル機器から参照できる備忘録として、この上ない利便性を享受している。
しかし、世の中はホームページではなく、ブログが主流。WordPress という言葉もよく目にする。ブログとは一体どういう仕組みのものなのか。おまけに、当方のホーム-ページは、Google からモバイルフレンドリーではないといわれる。PCでPCから見るために作ったのだからホットイテほしいものだ。
そこで、このサーバーに WordPress を導入し、ブログサーバーとしても稼働させて、ホームページとブログの違いや棲み分けについて考えてみることにした。
スポンサー リンク
1. WordPress の『導入と設定』に関するノウハウ集
1. Raspbian のセットアップからセキュリティ設定まで。
2. nginx で Webサーバーを構築するまで。
3. Webサーバーに WordPress をインストールして完成。
4. WordPress の更新トラブルについて。
5. WordPress のテーマを変更する方法について。
5. WordPress のバージョンアップ要領について。
1-2. 記事作成のための準備事項一覧表
本格的に記事を投稿する前の準備事項。
1-3. サイト管理のための準備事項一覧表
サイトへのアクセスを管理するための初期設定。
1-4. 初期カスタマイズ事項一覧表
初期段階での、最低限のカスタマイズ事項。
WordPress の『導入と設定』に関する記事一覧
![WordPress のバージョンとコンポーネントの組み合わせ](https://arakoki70.com/wp-content/uploads/2019/05/wp5.2_0011.jpg)
![【 Twenty Nineteen 】の詳細画面](https://arakoki70.com/wp-content/uploads/2019/05/wordpress-5.2_0151-100x100.jpg)
![最新版『WP Mail SMTP』の設定要領](https://arakoki70.com/wp-content/uploads/2018/01/wp-mail-smtp_132.jpg)
![WordPress2016から2017へテーマの変更](https://arakoki70.com/wp-content/uploads/2017/11/wp17_0023-100x100.jpg)
更新日:2023年10月7日 投稿日:2017年11月23日
![固定ページにサイドバーを表示](https://arakoki70.com/wp-content/uploads/2017/10/kotei-side_042.jpg)
更新日:2023年10月7日 投稿日:2017年10月25日
![記事作成のための準備事項](https://arakoki70.com/wp-content/uploads/2017/10/afee582e21a2d2fd51509d2e8ddf6db3.jpg)
更新日:2023年10月7日 投稿日:2017年10月23日
![「プラグイン」での初期設定](https://arakoki70.com/wp-content/uploads/2017/09/syokisettei_000155.jpg)
![ブログ上の表示名の変更](https://arakoki70.com/wp-content/uploads/2017/09/syokisettei_000143.jpg)
![ソーシャルリンクメニューの表示](https://arakoki70.com/wp-content/uploads/2017/09/syokisettei_000125.jpg)
![「カテゴリー」の表示](https://arakoki70.com/wp-content/uploads/2017/09/syokisettei_000262.jpg)
![ヘッダー画像の変更](https://arakoki70.com/wp-content/uploads/2017/09/syokisettei_000092.jpg)
![「一般設定」での設定](https://arakoki70.com/wp-content/uploads/2017/09/syokisettei_000012.jpg)
![WordPressの更新で、FTP接続情報を求められる。](https://arakoki70.com/wp-content/uploads/2017/09/077f6abffcab4f67fbe3c4ebfa60ffcb-100x100.jpg)
![「モデレートしてください」 という、コメントとメールを止める](https://arakoki70.com/wp-content/uploads/2017/07/moderate024.jpg)
![「投稿設定」での設定](https://arakoki70.com/wp-content/uploads/2017/09/syokisettei_000022.jpg)
![メールフォームの作成](https://arakoki70.com/wp-content/uploads/2016/08/contactform422.jpg)
更新日:2023年10月8日 投稿日:2016年8月10日
![サイドバーにプロフィール(自己紹介)を表示](https://arakoki70.com/wp-content/uploads/2016/08/profile112.jpg)
更新日:2023年10月8日 投稿日:2016年8月9日
![Facebook シェアボタンで画像が表示されない](https://arakoki70.com/wp-content/uploads/2016/07/fbappid10.jpg)
更新日:2023年10月8日 投稿日:2016年7月20日
スポンサー リンク
2. WordPress での『記事作成』に関するノウハウ集
記事作成のために導入すべきプラグイン。
記事作成のために行うべきカスタマイズ。
WordPress の『記事作成』に関する記事一覧
![](https://arakan60.com/wp-content/uploads/2016/06/negorotr101.jpg)
更新日:2022年1月15日 投稿日:2021年12月25日
![ビジュアルエディターでの引用の表示](https://arakoki70.com/wp-content/uploads/2019/07/blockquote_0122-100x100.jpg)
![カテゴリ一覧 の 固定ページ](https://arakoki70.com/wp-content/uploads/2019/01/cat-list_132-450x253.jpg)
更新日:2023年10月7日 投稿日:2019年1月23日
![「revision」のものが、纏まって表示された](https://arakoki70.com/wp-content/uploads/2018/07/2a72973b2e192cda45a3c16693090be4-450x253.jpg)
更新日:2023年10月7日 投稿日:2018年7月23日
![WordPressにmp4ファイルなどの動画を埋め込む](https://arakoki70.com/wp-content/uploads/2018/02/dougaup_024-450x340.jpg)
![エクセルをHTMLに変換](https://arakoki70.com/wp-content/uploads/2018/01/PutEXCEL_002-450x340.jpg)
更新日:2023年10月7日 投稿日:2018年1月22日
![WordPress 固定ページを「順序」で並べると利便性が上がる](https://arakoki70.com/wp-content/uploads/2018/01/koteipj_1101-450x253.jpg)
![代替アイキャッチ画像](https://arakoki70.com/wp-content/uploads/2017/11/relatedpost3b-450x253.jpg)
![WordPress 投稿一覧に「最終更新日」を表示](https://arakoki70.com/wp-content/uploads/2017/10/saisyuukousinbi004-450x253.jpg)
更新日:2023年10月7日 投稿日:2017年10月27日
![「Crayon Syntax Highlighter」の使い方](https://arakoki70.com/wp-content/uploads/2017/10/crayon_032-100x100.jpg)
更新日:2023年10月7日 投稿日:2017年10月26日
![画像のクラスで枠線を付ける](https://arakoki70.com/wp-content/uploads/2017/07/gws012b-450x253.jpg)
更新日:2023年10月8日 投稿日:2017年7月26日
![『ビジュアル』モードの場合「Quicktags」という選択欄が追加され、ここから登録したタグが呼び出せるようになる](https://arakoki70.com/wp-content/uploads/2017/07/addquicktag0152-450x253.jpg)
![Firefoxアドオンの「FoxReplace」が便利](https://arakoki70.com/wp-content/uploads/2017/06/firefox042-450x253.jpg)
更新日:2023年10月8日 投稿日:2017年6月6日
![地図に写真を貼る方法](https://arakoki70.com/wp-content/uploads/2017/05/62b65cb41047306c29f68c9e1ef312e2-450x253.jpg)
更新日:2023年10月8日 投稿日:2017年5月23日
![GPSのトラックデータを地図に描画してサイトに埋め込む方法](https://arakoki70.com/wp-content/uploads/2016/08/030dba2a6e561bfc4ea1b00acc75273f-450x253.jpg)
更新日:2023年10月8日 投稿日:2016年8月21日
![コース地図をWebサイトに表示する方法を変更する](https://arakoki70.com/wp-content/uploads/2016/08/wadachi012-450x253.jpg)
更新日:2023年10月8日 投稿日:2016年8月20日
![代替アイキャッチ画像](https://arakoki70.com/wp-content/uploads/2017/11/relatedpost3b-450x253.jpg)
更新日:2023年10月8日 投稿日:2016年7月18日
スポンサー リンク
3. WordPress の『カスタマイズ』に関するノウハウ集
画面デザインに関するカスタマイズ。
アイキャッチ画像 表示位置の変更 と 表示/非表示を制御
ソーシャルリンクメニューのカスタマイズ(次の、5段階に分割して記述。)
SNSボタンに関するカスタマイズ。
画面制御ボタンとリンクに関するカスタマイズ。
WordPress の『カスタマイズ』に関する記事一覧
![アコーディオンメニューでの表示例](https://arakoki70.com/wp-content/uploads/2023/11/accordion_0011-100x100.png)
更新日:2023年11月11日 投稿日:2023年11月9日
![「昇順リスト」ボタンをクリックしたときの「投稿日<昇順>記事一覧」。](https://arakoki70.com/wp-content/uploads/2022/01/jquery_0011-100x100.png)
更新日:2022年7月15日 投稿日:2022年1月6日
![改善できる項目のトップに、「適切なサイズの画像」項目があり、内容を見ると全ての画像が、『Simple GA Rankinng』で人気記事一覧を表示している【サムネイル画像】であることに気付く。](https://arakoki70.com/wp-content/uploads/2021/08/ranking-img_0151-450x253.png)
更新日:2021年8月30日 投稿日:2021年8月29日
![ユーザーの確認が完了すると、「アクセストークン」が発行される](https://arakoki70.com/wp-content/uploads/2021/06/OAuth_1271-450x253.png)
更新日:2022年7月23日 投稿日:2021年6月16日
![imple GA Ranking ランキング表示のカスタマイズ](https://arakoki70.com/wp-content/uploads/2021/04/s-ga-r_css_0111-100x100.png)
![グローバル変数と、投稿記事の取得関数](https://arakoki70.com/wp-content/uploads/2020/07/shortcode_0131-100x100.png)
更新日:2022年8月1日 投稿日:2020年7月25日
![記事上に パンくずリスト(カテゴリー)を表示](https://arakoki70.com/wp-content/uploads/2020/04/7beb3ee672b51b8bfdce6b64756b933a-100x100.jpg)
![ページ最下部にスクロールし、「Analytics API」をクリックする](https://arakoki70.com/wp-content/uploads/2019/08/ga-rank_0241-100x100.jpg)
更新日:2023年10月7日 投稿日:2019年8月23日
![画面の右下に【 プライバシー・利用規約 】のマークが表示される](https://arakoki70.com/wp-content/uploads/2019/01/reCAPTCHA-v3_532-450x253.jpg)
![固定ページに 投稿日・更新日・投稿者を表示する](https://arakoki70.com/wp-content/uploads/2018/09/koteipage-t_014-450x253.jpg)
更新日:2023年10月7日 投稿日:2018年9月8日
![記事タイトルの文字サイズを変更](https://arakoki70.com/wp-content/uploads/2018/01/kiji-title_002-450x329.jpg)
![ショートコードでブログカード化](https://arakoki70.com/wp-content/uploads/2018/01/b-card_012-100x100.jpg)
![ショートコードで『関連記事一覧』](https://arakoki70.com/wp-content/uploads/2017/11/425c74864bebf15cb5b1dd25869d3319-450x253.jpg)
![「続きを読む」をCSSでボタン化する](https://arakoki70.com/wp-content/uploads/2017/11/tuduki_022-100x100.jpg)
![「続きを読む」をCSSでボタン化する](https://arakoki70.com/wp-content/uploads/2017/11/tuduki-button_033-100x100.jpg)
![ページ内リンクのリンク先位置調整](https://arakoki70.com/wp-content/uploads/2017/11/pagenailink_012-100x100.jpg)
![ページトップへ戻るボタンの設置](https://arakoki70.com/wp-content/uploads/2017/11/pagetop_023b-450x253.jpg)
更新日:2023年10月8日 投稿日:2017年11月4日
![SNSボタンをサイドバーにウィジェットで表示](https://arakoki70.com/wp-content/uploads/2017/11/sns-button_122-100x100.jpg)
更新日:2023年10月8日 投稿日:2017年11月3日
![ソーシャルボタンを任意の場所に、自由に設置](https://arakoki70.com/wp-content/uploads/2017/11/132ef789727c8c60201ab867f7e83549-450x253.jpg)
![メニューバーの高さと背景色を変更する](https://arakoki70.com/wp-content/uploads/2017/10/menubar_072-1-450x253.jpg)
更新日:2023年10月7日 投稿日:2017年10月29日
![リンクの 文字・色・下線 のカスタマイズ](https://arakoki70.com/wp-content/uploads/2017/10/gamendesign_011-450x253.jpg)
更新日:2023年10月7日 投稿日:2017年10月28日
![子テーマの /assets/images/ に svg-icons.svg を配置](https://arakoki70.com/wp-content/uploads/2017/10/socialmenu_893b-450x253.jpg)
![ソーシャルメニューのカスタマイズ サイドバーへの表示](https://arakoki70.com/wp-content/uploads/2017/10/socialmenu_041-450x253.jpg)
更新日:2023年10月8日 投稿日:2017年10月7日
![Line と はてな を追加](https://arakoki70.com/wp-content/uploads/2017/10/socialmenu_912-100x100.jpg)
![フッターに表示される【 標準のソーシャルリンクメニュー 】のボタンの追加](https://arakoki70.com/wp-content/uploads/2017/10/socialmenu_931b-450x253.jpg)
更新日:2023年10月8日 投稿日:2017年10月3日
![標準のソーシャルメニューをカスタマイズ](https://arakoki70.com/wp-content/uploads/2017/10/socialmenu_813-100x100.jpg)
![アイキャッチ画像のカスタマイズ](https://arakoki70.com/wp-content/uploads/2017/10/eyecatch_00023-100x100.jpg)
![『前の記事』、『次の記事』を非表示にする](https://arakoki70.com/wp-content/uploads/2017/07/16custom_0032-450x253.jpg)
![【 FeedBurner 】の導入と設定要領](https://arakoki70.com/wp-content/uploads/2017/06/feedburner0452-100x100.jpg)
![【Feedly】アイキャッチ画像(サムネイル)が 表示されない時の対処法](https://arakoki70.com/wp-content/uploads/2017/08/feedly012-100x100.jpg)
更新日:2023年10月7日 投稿日:2017年6月23日
![RSS ボタンの設置と購読の詳しい方法](https://arakoki70.com/wp-content/uploads/2017/06/rss001-450x253.jpg)
更新日:2023年10月8日 投稿日:2017年6月21日
![WordPress Related Posts](https://arakoki70.com/wp-content/uploads/2016/11/wprp182-450x253.jpg)
スポンサー リンク
4. WordPress の運用とトラブルに関するノウハウ集
WordPress の『運用とトラブル』に関する記事一覧
![永続オブジェクトキャッシュを使用してください](https://arakoki70.com/wp-content/uploads/2023/12/redis_0011-100x100.png)
更新日:2023年12月18日 投稿日:2023年12月17日
![有効化すると「WPvivid Backup Plugin」画面が表示され、「バックアップ & 復元」タブが開く](https://arakoki70.com/wp-content/uploads/2023/11/f837b948b6b418311ca90fbd10f43d84-100x100.png)
更新日:2023年12月16日 投稿日:2023年11月3日
![PHP Warning: Undefined variable $xxxxx](https://arakoki70.com/wp-content/uploads/2023/10/WordPress-PHP_0021-100x100.png)
![PHP Warning: Undefined variable $xxxxx](https://arakoki70.com/wp-content/uploads/2023/10/WordPress-PHP_0021-100x100.png)
![【JSON 構成:】に「“gtag_id”=測定 ID」の入力画面が表示される](https://arakoki70.com/wp-content/uploads/2023/10/AMP-GA4_0051-100x100.png)
更新日:2023年10月3日 投稿日:2023年10月3日
![「Themes with AMP incompatibility」が表示される](https://arakoki70.com/wp-content/uploads/2023/10/AMP-compatibility_0021-100x100.png)
更新日:2023年10月5日 投稿日:2023年10月1日
![ウィジェットに設置している「最近の投稿」欄にショートコードがそのまま表示されるようになった](https://arakoki70.com/wp-content/uploads/2023/09/new-entries_0011-100x100.png)
更新日:2023年9月29日 投稿日:2023年9月29日
![Google Seach Console の「サイトマップ」で、/sitemap.xml の送信がエラーになっている](https://arakoki70.com/wp-content/uploads/2022/07/xml-sitemap-err_0011-100x100.png)
更新日:2022年7月16日 投稿日:2022年6月29日
![Googleアナリティクスで「GA4 プロパティ」を選択し、レポートの中から「リアルタイム」を選択して見ると、データが収集されていることが確認できる](https://arakoki70.com/wp-content/uploads/2022/03/GTM_1121-100x100.png)
![テーマが「Twenty Seventeen」のサイトで、サイトヘルスステータスに、「永続的なオブジェクトキャッシュは有効化されていません」が表示される](https://arakoki70.com/wp-content/uploads/2021/09/object-cache_0011-100x100.png)
更新日:2022年7月18日 投稿日:2021年9月7日
![他にも「webp」が生成されてない画像が無いか調べると、いくつも「webp」が生成されてない画像ある](https://arakoki70.com/wp-content/uploads/2021/09/webp-haisin_0111-100x100.png)
更新日:2022年7月18日 投稿日:2021年9月3日
![nginxのアクセスログから、「wp-cron.php」を抜き出した例](https://arakoki70.com/wp-content/uploads/2020/10/wp-cron_0011-100x100.png)
更新日:2021年7月2日 投稿日:2020年10月7日
![「WP Mail SMTP」の「設定」画面に戻り、「Authorization」の欄に「Connected as ***メールアドレス***」か表示されるので、「設定を保存」をクリックする](https://arakoki70.com/wp-content/uploads/2020/07/wp-mail-smtp_err_0111-100x100.png)
![おすすめの改善の1つに、「1つ以上の推奨モジュールが存在しません」があり、【imagick】と【zip】がインストールされていないと指摘される](https://arakoki70.com/wp-content/uploads/2020/07/recommend_0011-100x100.jpg)
![『Contact Form 7』のバージョンが、一覧表示される](https://arakoki70.com/wp-content/uploads/2020/04/contact_0131-100x100.jpg)
更新日:2020年8月17日 投稿日:2020年4月9日
![「Network」タブでページのリロードを行って、「img」の「Type」で確認する](https://arakoki70.com/wp-content/uploads/2020/04/webp_0621-100x100.jpg)
![記事を投稿した年月と同じ年月のフォルダーに、画像をアップロードしたい](https://arakoki70.com/wp-content/uploads/2020/02/uploads_0011-100x100.jpg)
![PHP版の「highlight.php」での Syntax Highlight](https://arakoki70.com/wp-content/uploads/2020/01/highlight.php_0431-100x100.jpg)
![テスト結果が表示されるので、「検証の問題」をクリックして「AMP HTML」を表示して、【important】を検索してみる](https://arakoki70.com/wp-content/uploads/2020/01/important_0121-100x100.jpg)
![AMPページでの、関連記事の表示結果](https://arakoki70.com/wp-content/uploads/2020/01/wp-r-post_0211-100x100.jpg)
![ampページではハイライトされない](https://arakoki70.com/wp-content/uploads/2020/01/highlight_0611-100x100.jpg)
![highlight.js のサイトにアクセスし、ライブラリを入手する](https://arakoki70.com/wp-content/uploads/2020/01/highlight_0011-100x100.jpg)
![解決策関連図](https://arakoki70.com/wp-content/uploads/2020/01/Reduce-DNS-lookups_1012-100x100.jpg)
更新日:2020年9月21日 投稿日:2020年1月8日
![WP Fastest Cache Premiumを購入済みであれば、「Premium」タブに更新があると通知される](https://arakoki70.com/wp-content/uploads/2019/12/wp-fastest-cache_3021-100x100.jpg)
![EWWW Image Optimizer](https://arakoki70.com/wp-content/uploads/2020/01/ewww_0011big-100x100.jpg)
![EWWW Image Optimizer](https://arakoki70.com/wp-content/uploads/2020/01/ewww_0011big-100x100.jpg)
![WordPressの移行環境](https://arakoki70.com/wp-content/uploads/2019/12/duplicator_0011-100x100.jpg)
![Font Awsomeのサイトにアクセスし、「ダウンロード」をクリックする](https://arakoki70.com/wp-content/uploads/2019/11/fontawesome_0111-100x100.jpg)
更新日:2022年7月22日 投稿日:2019年11月26日
![「レンダリングを妨げるリソースの除外」での、改善できる項目の変化](https://arakoki70.com/wp-content/uploads/2019/11/First-Paint-70_4125-100x100.jpg)
更新日:2020年9月21日 投稿日:2019年11月24日
![グローバル サイトタグ(gtag.js)から、タグ マネージャーにアップグレード](https://arakoki70.com/wp-content/uploads/2019/08/Tag-Manager_0021-100x100.jpg)
更新日:2023年10月7日 投稿日:2019年8月16日
![AMP を Ver 0.7.2 から 1.2.0 にアップデートした](https://arakoki70.com/wp-content/uploads/2019/08/ampv1.2_0011-100x100.jpg)
![記事の内容が表示されないページがいくつかある](https://arakoki70.com/wp-content/uploads/2019/07/crayon-bug_0011-100x100.jpg)
![WordPressのプラグイン『All-in-One WP Migration』による移行](https://arakoki70.com/wp-content/uploads/2019/07/wp-mig_0021-450x253.jpg)
更新日:2023年10月7日 投稿日:2019年7月12日
![「All in One SEO Pack」との併用には問題が起きる](https://arakoki70.com/wp-content/uploads/2019/02/yoast_0051-450x253.jpg)
更新日:2023年10月7日 投稿日:2019年2月9日
![警告の 7件をクリック](https://arakoki70.com/wp-content/uploads/2019/01/gazousaizu_0052-450x253.jpg)
![ドキュメントに AMP コンポーネントの「script」タグが複数あります。](https://arakoki70.com/wp-content/uploads/2019/01/amp-keikoku_6033-450x253.jpg)
![『AMP化』したディフォルトのページ](https://arakoki70.com/wp-content/uploads/2018/09/amp-font_212-100x100.jpg)
更新日:2023年10月7日 投稿日:2018年9月30日
![軽量なソーシャルボタンを自作](https://arakoki70.com/wp-content/uploads/2018/08/amp-sns_112-100x100.jpg)
更新日:2023年10月7日 投稿日:2018年8月24日
![AMP画面への、AMPアドセンスコードでの表示](https://arakoki70.com/wp-content/uploads/2018/08/amp-adsnse_212-100x100.jpg)
更新日:2023年10月7日 投稿日:2018年8月23日
5. WordPress を運用するサーバーに関するノウハウ集
最新バージョン。
Raspbian : Buster Release date:2019-09-26
Nginx : Stable version 1.16.1
PHP : 7.3.12 - 2019.11.28
MariaDB : 10.3.17
Nginx : Stable version 1.16.1
PHP : 7.3.12 - 2019.11.28
MariaDB : 10.3.17
Raspberry Pi Webサーバー WordPress 構築手順
1. Raspberry Pi セットアップ
6. WordPress の引っ越し要領
「WPvivid」で WordPressのドメインを移行する。
「Duplicator」による稼働中 WordPress の引越。
「All-in-One WP Migration」による稼働中 WordPress の引越。
7. WordPress 旧バージョンに関する記事
![wordpress 4.9 スタイルシート (style.css) でのエラー](https://arakoki70.com/wp-content/uploads/2017/11/wp4.9_css_error_031-100x100.jpg)
![WordPress4.8 をインストール](https://arakoki70.com/wp-content/uploads/2017/09/stretch_wp_02-100x100.png)
![パワーポイントで、パラパラ漫画の『コマ』を作る](https://arakoki70.com/wp-content/uploads/2017/07/powerpoint012-100x100.jpg)
更新日:2023年10月8日 投稿日:2017年7月20日
以上。
スポンサー リンク