PLUSからAFFINGER4に変更する際に、デザインをほぼ同じ状態にカスタマイズしてから公開しました。どのような方法で?というと、自分のパソコン内(ローカル環境)で子テーマを作成して表示確認をしてからサーバーへアップロードするという方法です。下記は、今回のテーマ編集をしたローカル環境画面のキャプチャです。現在ご覧いただいている当ブログのトップページと全く同じように見えますが、赤枠部分の記事一覧が違っているのが確認できるかと思います。こんな風に、見た目を整えた子テーマを公開中のブログへ「ヒョイっ!」と適用させることで、ユーザーさんが見てくださっている画面が何度も変わったり、時に真っ白になってしまったり...(笑)、メンテナンス画面でサイトを閉じる必要もなく、表示が不安定な時間帯を短縮することが可能になります。『WordPressのローカル環境構築!』と聞くと、敷居が高そうだなぁ。感じる方も多いかと思いますが、全然そんなことはありません。編集可能な状態までに要する時間は5分~10分程度、編集方法は普段お使いのWordPressと全く同じです。AFFINGER4は、管理画面やカスタマイザーでの豊富なカスタマイズが可能ですので、ローカル環境での表示確認は全ての方に必要な作業ではありませんが、今回の私のように、ある程度自分でテーマファイルのカスタマイズをしてから公開したい方やカスタマイズにまとまったお時間がとりにくい方には特におすすめです。ローカル環境のWordPressは、テーマやプラグインのテスト用としてひとつ持っておくととても重宝しますよ。WordPressは、Windows用のフリーソフトです。Macをお使いの場合は、こちらのページが参考になります。PLUSのカスタマイズはAFFINGER4に応用できる?事前準備テーマ変更の事前準備として、公開済みのサイトのWordPressダッシュボード→外観→テーマ→「新規追加」から、親テーマの「affinter4」だけをインストールしておいてください。有効化はせず、そのままでお願いします。実は、つい最近パソコンが故障しまして...長年使っていたMicrosoftの「WebMatrix」というフリーソフトを再インストールしようとしたところ廃止になっていたため、検索して出会ったのがこちらの記事でした。WordPressで超簡単にワードプレスローカル環境を構築する方法/寝ログ「え?こんなに簡単に?」と。半信半疑で試してみて本当にびっくりしましたよ。インストールと起動方法、使い方などは記事内でわかりやすくまとめて下さっているので割愛させていただきます。※現在インストールできるバージョンでは、言語選択が可能となっていますので日本語化の作業は不要です。インストール完了後は、インストール先に作成されたフォルダ(InstantWP_4.5)をダブルクリック→「InstantWP」というアプリケーション上で右クリック→デスクトップにショートカットを作成しておくと、起動する際に便利です。WordPressが起動できないときは?Windowsのユーザーフォルダ名が日本語になっている場合、正常にインストールが完了しても、「このページは表示できません」という表示が出て、起動できないケースを確認しています。ユーザーフォルダ名は、エクスプローラー→PC→Windows(C:)→「ユーザー」から確認できます。この場合の対処法として、Windowsの再インストールやユーザーフォルダ名の変更などがあるようですが、実際に経験がありませんので具体的な方法や参考サイトをお伝えすることができません...ユーザーフォルダ名の変更をされる際には、Web検索などで情報を収集し、慎重にご検討されてから実行されることをおすすめします。Explorerで開きます。次回からは、普段使いのWordPressと同じようにブックマークからアクセスしています。WordPressを起動しておくことを忘れずに。タスクバーにアイコンが表示されていることを確認してからアクセスするようにしてくださいね。・・ここを忘れていて何度も固まった経験アリ(笑)※起動画面からのブラウザの指定先をファイル編集によって変更する方法もありますが、起動画面自体もブラウザのタブで開いてしまうので使いにくかったです。確認したいポイントだけを編集テーマは、普段お使いのWordPressと同じように、ダッシュボード→外観→テーマ→新規追加から親テーマと子テーマの両方をインストール後、子テーマの方を有効化してください。子テーマについては、こちらで詳しく説明しています。前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。トラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。...その後、管理画面やカスタマイザーで表示に関する部分の設定をしてから、確認したいポイントだけを編集します。管理画面やカスタマイザーでの設定は、改めてサーバー側での設定が必要となりますので、全ての項目の設定は必要ありません。WordPressは、あらかじめ投稿ページ・固定ページ・コメント欄など英語の内容が入った状態でインストールされます。私の場合は、カスタマイズの表示確認が出来ればいいだけなので、英語の投稿記事はそのままで。以下の項目のみササっとテキトーに編集しています。新着記事5件にアイキャッチ画像を追加メニュー確認用に固定記事のタイトルのみ修正テストページを1ページだけ作成こちらは、新規に作成したテストページのキャプチャです。見てみると・・やっぱりテキトーですね。(笑)各テーマファイルの子テーマ作成方法style.css以外のテーマファイルのカスタマイズをしたい場合の子テーマ作成方法ですが、ローカル環境の場合は、自分のパソコン内での作業となりますので、フォルダやファイルの移動時と同じ方法となります。親テーマのファイルを右クリック→コピー→子テーマ内にペーストこれだけです。例として、「single.php」と「single-type1.php」の子テーマ作成方法を説明しますね。エクスプローラー→親テーマ「AFFINGER4」をダブルクリック→コピーしたいファイルを右クリック→コピー。Folder」をクリックすると、エクスプローラーでテーマファイルが入ったフォルダが開きますが、下記の手順でも同じ場所に辿り着くことができます。インストール先のフォルダ(InstantWP_4.5)→iwpserver→htdocs→wordpress→wp-content→themes続いて、「affinger4-child」をダブルクリック→空きスペースで「貼り付け」で完了です。下記は、当ブログのカスタマイズ済みの子テーマなので、他にもファイルが入っていますが、ご自身がコピーされたものが入っていればOKです。子テーマ作成後は、WordPressダッシュボード→外観→テーマ→テーマの編集でカスタマイズができます。削除もやり直しも自由自在。ヘンになっても失敗しても誰にも見えていませんから、思いっきり色々なカスタマイズに挑戦してみてくださいね。(笑)AFFINGER4の標準機能、AMP対応ページのテストも可能です。WordPressで表示確認ができなかったもの今回の子テーマ作成時に、表示確認ができなかった項目がいくつかありました。正しいコードを設置しても空欄になってしまうので、大体のスペースで予測したり他のASP広告で表示確認を行いました。表示確認は、メディアを追加でアップロードした画像URLを使いました。サーバーへアップロード後、子テーマの「imeges」フォルダの相対パスに修正しましたが、手間を省きたい場合は、あらかじめ公開済みサイトのメディアへアップロードされてもよいかと思います。Buzz」のテストができませんでした。表示確認とカスタマイズは、記事下に表示されるプロフィール用プラグインで代用しましたが、ローカル環境ではなく、サーバーへアップロード後にカスタマイズしてもよいかと思います。最後にFTPソフトを使って、公開済みのサイトに子テーマをアップロードします。FTPクライアントソフト「FFFTP」のインストールと使い方はこちらのページで説明しています。万が一のトラブルに備えて、WordPressでのサイト運営の際には、サイトデータのバックアップが必要不可欠です。「今まで更新してきた全ての投稿記事が消えてしまう。Folder」→「affinger4-child」を右クリック→コピー→デスクトップなど、任意の場所にペーストしてから選択するとわかりやすいです。右側(サーバー側)一番上の階層をダブルクリック→「wp-content」をダブルクリック→「themes」をダブルクリックです。編集済みの子テーマ「affinger4-child」を右側(ローカル側)から左側(サーバー側)の空きスペースにドラッグ&ドロップして完了となります。(既にアップロード済みの場合は上書きしてくださいね)アップロード後は、デスクトップにコピーしたファイルを削除。カスタマイザーでの設定を改めて行ってください。PLUSで行ったカスタマイズをAFFINGER4に応用して、見た目を同じにすることは可能です。PLUSのstyle.cssをコピーしてAFFINGER4に貼りつけても、全く同じ見た目にはならない部分がほとんどです。いった意味でも、テーマ変更の際のローカル環境構築はとても役立ちます。今までお伝えしてきた、当ブログで行った全てのカスタマイズ記事はAFFINGER4でも応用できるように加筆修正を行いました。取り入れてみたいカスタマイズがありましたら、ぜひご参考になさってくださいね。カスタマイズまとめ当ページでご紹介しているカスタマイズは、AFFINGER4・STINGER8でも応用できます。...今後も、AMPページや細かい部分のカスタマイズ記事をご紹介していく予定です。WordPressでのローカル環境構築方法や注意事項、子テーマ作成とアップロード方法などをお伝えしました。最後までお付き合いくださりありがとうございます。meKanami(かなみ)40代、4児の母、認知症の義母と同居中です。何気ない日常に幸せを感じるマイペースなヒト。子育てと介護の傍ら「自分にできることってなんだろう?」を模索しながらブログを書いています。ステッチ風~こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。AFFINGER4での見出し(h3)のカスタマイズコードの指定先の変更を行いました。...896view【AFFINGER4】AMPページ用ウィジェットの見出し追加と表示位置の変更方法こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。...2,770view【ロリポップ】独自SSLが無料に!WordPressのSSL化(https化)全手順ロリポップレンタルサーバーが2017年7月11日から、無料の独自SSLを導入できる機能の提供を開始しました。~カスタマイズの引継ぎ・注意点など~当ブログで利用しているWordPressテーマ「AFFINGER4」に専用子テーマ「JET」を導入しました。ヘッダー・サイドバー・コンテンツの細かいカスタマイズとCSSの基礎レッスンこちらのカスタマイズは、AFFINGER4でも応用できます。Twelve」を使用していました。当ブログのサイドバートップには、アドセンスのレスポンシブサイズの広告を設置しています。専用子テーマ【JET】記事タイトルの文字数変更などのカスタマイズ前記事では、WordPressテーマ「AFFINGER4」の専用子テーマ「JET」の導入手順、カスタマイズの引継ぎ方法、注意事項などをご紹介しました。カスタマイズまとめ当ページでご紹介しているカスタマイズは、AFFINGER4・STINGER8でも応用できます。PLUS」「STINGER8」「AFFINGER4」のカスタマイズ情報です。現在見ていただいている当ブログで行っている全てのカスタマイズ方法を記録しています。※AFFINGER5「WING」のカスタマイズにつきましては、現在確認作業とまとめ記事の作成中です。備忘録(WordPress)ウィジェットに追加したアドセンスが保存できない・余白ができる場合の対処法WordPressのウィジェットエリアにアドセンスコードを追加する場合、つい最近までは「カスタムHTML」を利用するのが一般的でしたが、WordPress4.9よりHTMLのエラーチェック機能が新たに加わったことで、エラーにより保存できない状態になることがあるようです。上記のように「!」の警告が表示されていても保存できる場合は問題ありませんが、保存ボタンをクリックしても保存されない場合は「カスタムHTML」ではなく「テキスト」にアドセンスコードを貼りかえることで対処することができます。備忘録(WordPress)カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。N」ver20180117を追加しました。style.css及びst-amp-css.php内の画像パスに拡張子(.png)の記載もれがあり、コードの修正を行いました。...ReadMoreSTINGER・AFFINGERカスタマイズ【AFFINGER4】関連コンテンツを通常ページとAMPページに設置する方法こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。WordPressテーマ「AFFINGER4」の通常ページとAMPページにアドセンスの関連コンテンツユニットを設置する方法をご紹介します。最近になって、新たに「インフィード広告」や「記事内広告」などのネイティブ広告が追加されたことで、どこにどんな風に広告を置けばいいんだろう?と戸惑っている方も多いのではないでしょうか。ページ以外のアイキャッチ画像(トップページ含む)」にて設定可能になりました。先日Twitterでトップページをシェアしていただいたことをきっかけに、トップページのみ「Twitterカードの画像が表示されない」ことに気がつきました。下記は、TwitterとFacebookのOGPチェックツールでの検証結果です。数年前、右も左もわからず挑戦したWordPressでのサイト作成。当時はWeb上の沢山の情報に助けられました。初心に戻り、WordPressにゼロから挑戦したい方を応援!難しい説明や専門用語は極力省いて、初心者さん目線でレクチャーします。ゼロからのWordPress入門【21】プラグインの設定方法について加筆修正を行いました。前回までは、更新情報の受け取りツールとして、サイト名で登録することができる「Facebookページ」の作成方法とページプラグイン設置方法、さらに、Twitterのフォローボタンと埋め込みタイムラインの設置方法をお伝えしました。WordPress.comを利用して、FacebookページとTwitterへ更新情報を自動投稿する方法をいくつかの注意点などを含めてお伝えしていきます。前ページでは、ユーザーさん向けの更新情報受け取りのツールとして、サイト名で作成することができる「Facebookページ」の作成方法とページプラグインの導入方法をご紹介しました。今回は、サイドバーやフッターへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法、さらに埋め込みタイムラインの背景を透明にする方法を説明していきます。・・実は埋め込みタイムラインの設置方法については、以前にも記事内で一度お伝えしているのですが、その後変更があったようです。前ページでは、WordPressのカスタマイズと子テーマについてご紹介しました。次のステップは、ブログの『更新情報発信』についてのお話しです。無料ブログサービスのように、コミュニティ間での「読者登録」のツールがないWordPressでのサイト運営では、更新情報の受け取りに必要なツールは自身で設定する必要があります。前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。トラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。WordPressでは、自分の好みに合わせてテーマファイルを自由にカスマイズすることが可能となっています。このカスタマイズ時に便利なのが「子テーマ」です。ここでは、実際に「FFFTP」を利用したファイルのバックアップとWordPressプラグイン「WP-DBManager」を利用したデータベースの自動バックアップ方法を順を追って詳しく説明していきます。バックアップ作業はいくつものステップがあって大変ですが、2回目以降は面倒な設定がないのでとても楽チンです。子育て心は一緒に♪娘へのプレゼントはお揃いのくまのお守りに決めましたクリスマスまであと1か月を切りましたね。お子さんをお持ちの方はプレゼント選びや準備にワクワクの季節。それも含めてクリスマスは親子の一生の思い出に残る楽しいイベントだと思っている私です。我が家では毎年、4人の子供たちが小さな頃からサンタさんからのプレゼントの他に、母企画の「家族Deビンゴ大会」というイベントをクリスマスイブに開催しています。一人ひとりが驚くような。嬉しいサプライズプレゼントはなんだろう?と心を弾ませるこの季節。AdSenseフォローアップセミナー(札幌)に参加してきました。当日は受付を担当させていただいたものです。参加者の方々には謎の人物だったかもしれませんね。んくらさん(@matari39)とは8年前、無料ブログサービスで子育てブログを書いていた頃に出会い、私にとっては、恩師でもあり...そうですね。友人というよりも、先生というよりも「お兄さん」という位置づけがぴったりの。備忘録(WordPress)カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。今までブログやSNSでのプロフィール画像は、フリー素材でお借りしたものを使っていましたが、2018年のスタートと合わせて似顔絵アイコンに変更しました。周囲にはご自身で綺麗に絵が描ける方もいらっしゃって、常々「すごいなぁ。そんなことができたら素敵だな。」と思っているのですが、なんせ人一倍絵心がなくてですね。