パソコン関連サポートなど、バックアップ致します。私的ブログパソコンのサウンド環境改善しました。WordpressreCAPTCHAがv2からv3になったことでGoogleが提供している「reCAPTCHA」がV3にbotをガードしてくれるありがたいサービスですが、最近V3にUpgradeユーザーはreCAPTCHAを意識しないで使えるようになりましたが、Web運用者は注意が必要になるようです。v2のままだと、お問合せなどがすべてスパム判定される可能性があります。実は恥ずかしながら、お客様から問い合わせが届かないとのご連絡を頂き、判明しました。WordoressだとContact7をほぼ確実というくらい使用されていると思いますが、まさにこの状況が発生します。Contact7のバージョンアップ後、reCAPTCHAが無効になり再設定が必要になりますが、この時に必ずv3のキーにしないといけません。メールを登録すると、レジストリURLを配信するようなサイトをいくつか確認してみましたが、メールが届かない(もちろんspamになっていないのは確認)ところがありました。似たような問題が発生しているのかもしれません。Wordpressホームページやネットショップで期間限定キャンペーンを表示する。期間を設定して表示したいと思います。サンプルソースはたくさん転がっていて、楽天市場向けなどは多く公開されています。別に楽天市場やYahooショップでの方法と変わりありませんが、制約が少ない分より簡単に表示できます。ここでは、ウィジェットに簡単コピペできるように、JavaScriptもStyleもhtmlも一緒にしちゃっています。></a></div>貼り付けたい場所にウィジェットがある場合は、「カスタムHTML」に上記を記述すればOK但し、SiteGuardのプラグインを有効としている場合、保存に失敗するかもしれません。その場合は、WordPressのカスタムHTMLやカスタムCSSが保存できない場合の対処を参考に対処しましょう。Magazineについて一応、日本語も対応(独自部分は日本語にはなりません)のNewsやMagazine形式のテーマとなります。写真を使ったプロダクトの紹介などにも適したテーマとなっていて、proバージョンを購入して機能アップもできます。スタイルのウェブマガジンで、ニュース、新聞、雑誌、スポーツ、テクノロジー、グルメ、トラベル、ブログ、出版、ビジネス、その他様々な分野に適したテーマです。このテーマは、カスタマイザー(Customizer)上に構築されており、瞬時にプレビューを確認しながら、あなたのウェブサイトをカスタマイズできます。クリック一つであなたのウェブサイトの色合いを変えることができます。このテーマでは、検索エンジン最適化(SEO)機能を使用しているため、Googleのランキングで上位にランク付けされやすいのも特徴です。他には、ソーシャルメディアとの統合、カスタム・ウィジェット、著者のプロフィール、ブレッドクラム、広告設定、カスタムCSS、トランスレーション・レディなど様々な機能があります。later」のものをカスタマイズして使用する一例を記載します。子テーマの作成方法は、いろいろな方が丁寧に説明されているので、詳細は省略します。functions.phpとstyle.cssを含む子テーマを作成します。WordPressのインストールされた環境で、/wp-content/themesの下に子テーマのフォルダーを作成して、functions.phpとstyle.cssを置きます。style.cssには最低以下の記載をします。metro-magazineDescription:Author:Tags:Version:*/functions.phpには、とりあえず、以下の記載をします。array('parent-style'));}カスタマイズ準備が出来ましたので、いよいよカスタマイズ開始です。子テーマの内容が正しい前提で、プレビュー表示ができれば、OKですが、ひょっとすると「リダイレクトの繰り返し......」とかでプレビュー表示に失敗するかもしれません。その場合は、functions.phpの最初に(<?phpの次の行)以下を追記します。'redirect_canonical');真の対策をする場合は、もっと深く調べてみる必要がありますが、とりあえずはこれでOKカスタマイズのヒントカスタマイズ画面の「プロバージョンの案内」は日本語の場合はみ出して見栄えも悪いので削除、footerのCopyrightのPowerd表示も削除しました。カスタマイズ内容をズバリ書きにくい部分なので、ヒントだけ記載します。手順としては、子テーマのfunctions.phpで、設定をしている部分の「add_action()」を「remove_action()」して、必要に応じて新たに異なるfunction名で再定義します。);子テーマを作成できる方なら、これだけのヒントで対応できると思います。スライドショーの追加スライドショーは、Wegit対応で使いやすいプラグイン「MetaSlider」を利用します。Magazine」はあらかじめhookが何か所か設置されていますので、サイドバーを作成して、ウィジェットでいろいろな使い道ができるようにします。functions.phpに以下を追加します。関数名やサイドバー名は適当に変えられますが、function名には「_」は使えますが、「-」は使えませんので注意が必要です。);これでウィジェットにトップスライドショーというサイドバーができます。);の部分を表示させたい場所のhookに変更してください。ちなみにhookは、親テーマの/inc/template-hooks.phpなどを見るとわかります。TOPページのカテゴリー4の画像を変更カテゴリー4の表示をしている部分をリムーブして、アドするのが綺麗と思いますが、ここではあまり変更しない前提で、子テーマにimageを置くようにします。この部分は、CSSでバックグランド画像として表示させているので、子テーマのstyle.cssに以下を追記します。relative;}子テーマのフォルダーにimagesフォルダーを作成して、表示させたい画像を置きます。表示サイズや、表示のさせ方は、必要に応じて変更します。Consoleで構造化データのエラーが多発する場合があります。ありません構造化データのエラーが発生しても直接はSEOに影響するわけではありませんが、検索結果の表示に影響しますので、不適切な構造化データだと、クリック率に影響して、長期的・間接的にSEOへ影響します。Wordpressはデフォルトで<article>に[class=”hentry”]付加してくれますので、折角なので対応します。対応は、適切な箇所にclass=author/entry-title/updatedを追加するだけ通常、投稿記事には「author」と「entory-date」は、大概のテーマではあるはずなので、そこのclassにauthorとupdatedを追記すればOKなのですが、この時2つのポイントに注意が必要です。hentryで囲まれた中であること(通常はこの条件は満たすが、自作テーマやメインコンテンツの外枠に表示するような特殊な構造だと注意が必要)entory-date/updatedには、形式のルールがあり、これに則している必要があります。);こんな感じauthorは通常この後に表示される(?)ので、その部分にclass:authorを追記、表示がなければ以下のような感じで、上記の記述に続けて追加します。'</span>';最後にentory-titleの対応方法には2つのパターンがあります。hentryで囲まれた中にTitle表示はある場合は、そのtitleのclassにentory-titleを追加するだけですが、本ページで使用しているテーマのようにhentryのarticleの外にtitle表示はある場合は、別途にhentryに囲まれた中にtitle表示を追加する必要があります。本ページのテーマの場合は、以下のようにしています。</div>これまでのまとめて、functions.phpで関数定義して、適当な場所に差し込みます。投稿ページには、投稿日や執筆者名が通常あるので、上記の方法で通常対応できると思いますが、固定ページの場合は、これらの記載はない場合が多いのではないかと思います。固定ページでは”hentry”をとってしまうのもありなのかもしれませんが、上記の3つの記述は固定ページにも一応対応していますので、「pureframe_posted_on();」を適当な場所に挿入します。固定ページのarticleを閉じる直前など記事の邪魔が少ない(デザインへの影響が少ない)場所に挿入します。Pages)対応このサイトのようにモバイルを意識して構築した場合に、AMPの必要性は個人的には若干疑問(現状では、表示速度やビジュアル性が低下する場合が多々ある)なんですが、Googleが対応を推奨している以上、AMPを無視するわけにもいきません。Pages」を使用します。有料の機能/プラグインが必要な部分は通常ページへの案内をしてそちらへのリンクを掲載で対応して、お金も手間も倹約します。(開発者の為に余裕がある方は、有料の機能/プラグインもどんどん使ってあげてください。Pages」を使用します。CSSに通常ページのCSSを貼り付けるだけで、通常ページに似せたデザインにできますが、使えないCSSがあります。CSSに貼り付けると文法チェックされて、無効なものは赤の△、注意が必要なものが黄色の△で表示されますので、最低限、赤の△は、修正or削除します。ページ」と表示されてしまいます。ページ」となってしまうようなので、コメントはすべて削除しておくと安全かもしれません。consoleを見ましょう。ページ」と表示されてしまったら、速やかに修正しましょう。(widgets)を有効にすると各ページでAMP専用のページが簡単に作成できるようになります。Redirectionを有効にするとモバイルからのアクセスでは自動的にAMPページが表示されるようになります。この場合はSEO設定などもちゃんとしておかないとモバイルファーストとなったときにSEO的に不利となると思われます。consoleはAMPページを認識します。Dataは設定しましょう。この設定をしてないと構造化データが不完全となってしまいます。Wordpresspure.cssは、flexを使って自由なレイアウトのレスポンシブ対応にする。pure.cssでレスポンシブ対応するなら、flexを使いましょう。CABCこんな感じにHTMLに記述された順番にしか並びません。BCAの順番に縦に並ぶようにしたい場合、どうしたらよいでしょうか?pure.cssでpure-gで括るとbox/flexbox/flexの定義がされているので簡単!以下のような感じで、それぞれのボックスにオーダー番号を付けてあげるだけで、簡単に並び替えが出来ちゃいます。-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;で、これを画面サイズごとにCSSに定義していくと画面サイズごとに違った順番で表示の変更も可能となります。CAA:3、B:1、C:2BACA:2、B:1、C:3こんな感じにも簡単にできます。弊社作成中のテーマ「pureframe」では、以下のように使っています。分かってしまえば、簡単ですね。screenでの定義順番は注意が必要で、CSSの基本ルールで最後の定義が有効になりますので適用範囲の「デフォルト、広いー>狭い」とします。ウィジェットと違い自動で<p>タグで括らず、htmlを記述できる新しい機能ですが、セーブが完了しない事があります。この他にも、カスタムcssや投稿記事内でjavascriptを記述した場合とかも同様にセーブできない。セーブできたように見えても、保存出来てなかったなどが発生することがあります。SiteGuardが動作している環境では、次の対処で解決します。SiteGuardが稼働中の環境での対処方法SiteGuardはセキュリティ強化を手軽に強力にしてくれる便利で頼れるWordpressのプラグインですが、セキュリティ対策故に誤動作して悪さをしてしまう事があります。間違いはないはずなのに保存・実行の段階で期待通りに動かない場合は、次のように対処しましょう。レンタルサーバーの管理画面で、WAF機能のログを見てみましょう。不具合が発生した時間にログが登録されていたら、その「URL」と「検出されたシグネチャ」をメモしましょう。WordPressの管理画面のSiteGuardのWAFチューニングサポートのメニューを開きます。「新しいルールの追加」をクリックして、シグネチャとファイル名、コメントの入力画面にします。メモした「検出されたシグネチャ」をシグネチャへ、「URL」をファイル名に記入して保存します。これで問題は解決するはずです。うまくいかない場合は、再度見直し(半角スペースやtabが挿入されていないか?など)修正は、一度削除して新規に入力し直すと良いと思います。修正だとうまく反映されない場合があるようです。WAFチューニングの設定方法の詳細はこちらWAFチューニングをしても解決しない場合SiteGuard以外にも要因になるプラグインはあると思います(定義が重なっている場合など)が、まずは、自分の作業内容を疑って、もう一度、丁寧に見直しましょう。新たに変数・関数定義をした場合などはユニークとなっているか?(簡単な確認方法は私は知りませんので、グローバルな定義は頭に特定のキーワードを付けるようにしています。)そのうえで、やっぱり、不具合時にWAF機能にログが登録されているようなら、追加したWAFチューニングの設定を削除して、入力し直して見ましょう。WordpressWordPressのビジュアルエディタTinyMCEを少し使いやすくする。TinyMCEによく使うフォントや折角のフレームワークを登録して使いやすくする。Advanceでツールアイコンを追加したりして、使いやすくできるのですが、フォントやスタイルまではやってくれません。スタイルについては、editor-style.cssでCSSを読み込んで見栄えを実際に近くでき、CSSのclassを付加することも出来ますが、セレクタ(tag)は指定は出来ません。editor-style.cssを読み込んで、出来上がりに近い表示にする。function.phpに以下の1行を追加します。);ここでは、cssフォルダーの下のeditor-style.cssを読み込んでいます。editor-style.cssには、H1/H2/H3/...などをstyle.cssなどから抽出して記入します。初期設定と記事作成に使うタグだけなので、さほど多くはないと思います。あと、CSSフレームワーク関係も使えるようにしたいので、初期設定の部分と記事作成に使うものを抽出して追加します。@importで丸ごとインポートもできるようですが、面倒でも必要な部分だけを記述するのが良いと思います。フレームワークは、記事作成時には影響は少ないと思いますので、どの部分が必要かわからない場合は、省略でも良いと思います。pure.cssの場合は、baseとtable、あと必要に応じてButtonsとGridでしょうか。Gridsstyle.cssから抽出した共通(基本)設定とH1/H2/H3/...など多機能のフレームワークを使っていて、どの部分を抽出すればよいかわからない場合は、記事ではpure.cssを使う方法もあります。小さいフレームワークで、他との競合もないので、追加しても邪魔にはならないと思います。プラットフォーム違いでも使える代表的英字フォントと日本語フォントに変更する。こちらも、function.phpに以下を追加します。$arr;}add_filter('tiny_mce_before_init','pureframe_tinyMCE',1000);フレームワークを利用する為のオリジナルのスタイルを登録する。記事もレスポンシブ対応させる必要が多々あると思います。画像や表などは面倒ですし、よくわからない人にclassを追加してなんて言ってもわかりません。ここでは、もともとのpure.cssとの対比が分かり易い(自分が使う為の設定なので)表記で登録していますが、実際に使う方が分かり易い表記にすればよいと思います。$arr;}add_filter('tiny_mce_before_init','pureframe_tinyMCE',1000);これでひとまず完了!WordPressのビジュアルエディタTinyMCEの変な設定の表もこれで綺麗に作成できます。あ~!....忘れていました。今度こそ、WordpressのビジュアルエディタTinyMCEが素敵に変身です。おいて、他社と同等かそれ以上の魅力のあるレンタルサーバーであるからこそ、話題に上るのだと思います。今では、大手では当たり前となっているようですが、paperboy時代からお客様に見えない部分でサーバーの多重化や回線の多重化などしっかりとした運用をしている老舗なので、私はたまにお試しで浮気はしますが、ほぼロリポップ一本で運用しています。安心してデータを預けられるレンタルサーバー。月額100円(税抜)~容量最大400GBでWordPress簡単インストールなど多彩な機能がついて、バックアップ機能も完備!WordPressのホームページに高速化施策の結果。結果から高速化したのは、このホームページです。pure.css導入のテーマで作っていますが、ちっとも高速ではない(実際CSSフレームワークは全体のうちの極僅かなので、高機能のCSSフレームワークを高速なCDNを利用して使用した方が全体的には高速になるかもしれません。)ので、自家製テーマなので、テーマ自身の高速化を含め対策した結果です。サーバが混むと5秒位になることはありますが、アフィリエイト広告(PCページよりは1枚減らしてますが^-^;)とFacebookページありでこれは優秀だと自己満足しています。これなら満足できる性能ではないでしょうか。WordPressのホームページの高速化のための施策テーマ自体の高速化は、使用するテーマにより変わってくるのでここでは詳細は省略します。(高速なCDNが存在するフレームワークやアイコンなどは、CDNから読む、使用していないheader情報は削除するなど)お使いのテーマによっては、ここでの施策を自前で内蔵していたり、優れたソース(wordpressはダイナミックにhtml/cssを生成しますので、phpの書き方一つで随分とレスポンスが変わります。)など様々な工夫で高速化されたものも存在します。私がお客様サイトの作成のペースで使用することの多いで、「BizVektor」などもその1つです。(よく使うもう1つ「Lightning」も比較的高速ですが、標準テーマの範囲で作成されている為か、ここでの高速化施策で、改善できます。Insights」でチェックして、ファイルを置き換えましょう。リソースをダウンロードできます。」と最適化されたデータを作成、ダウンロードすることができます。変更できるものは差し替えましょう。共通の画像をモバイルもPCも使用している場合、圧縮画像のサイズを確認しましょう。PCではぴったりでもモバイルでは解像度が不足などの場合があります。ダイナミックにstyle.cssを生成するテーマの場合は、単純な差替えは有効でありません。場合によっては不具合の要因になるかもしれません。画像読み込みにCDNを使う予定がある場合は、綺麗に見せたい画像は圧縮画像への置き換えは控えた方が良いと思います。CDN側でも圧縮しているのか画像の品質が低下する場合があるようです。以下の様な項目で、対策状況と改善策を提案してくれますが、注意してダウンロードしたデータと差し替えると、「3.画像を最適化する」は改善されます。「4.CSSを縮小する、6.JavaScriptを縮小する」も若干改善します。差替えはFileZillaなどでftpで行います。Minify」により高速化しましょう。高速化のプラグインは沢山ありますが、多機能すぎたり依存性が強かったりとしますので、できるだけ単純軽量で稼働実績も多いものを選びました。Insights」の指摘の1項、2項、4項、5項、6項、9項が改善されます。Cache」をインストール・有効にして、以下のようにチェックを入れます。このままでもいいですが、念のため、キャッシュのフラッシュの設定をしておきます。Minify」をインストール・有効にします。この状態で無条件HTML/CSS/JavaScriptの縮小・結合をしてくれますが、テーマの作りや使用しているプラグインによっては不具合が発生するかもしれません。(出来れば、ローカルに公開サーバー同等環境を用意して確認しておくのが良いと思います。Minify」に任してしまいます。Cache」を設定します。Minify」側でするようにすれば、問題はないようです。これまでに記述したツールで評価結果をよくしたり、不具合を改善するためには、3カ所チェックします。Listに記載しましょう。/wp-content/themes/%テーマ名%/style.cssこんな感じで記載します。「BizVektor」の場合だと、私の事例では、以下のようにすると不具合なく動作するようですが、殆ど高速化は見られないので、使用しない方が良いかもしれません。(お客様のサイトなので使用を止めました)/wp-content/themes/biz-vektor/design_skins/001/001.css最後にFixしているホームページなら無料の画像CDNを導入しましょう画像限定のCDNの導入は簡単で、画像はサイトデータの多くを占めますので、高速化に大きく貢献しますが、注意が必要です。意識的にデータの削除は出来ませんし、URLさえわかればだれでもアクセスできますので、個人情報にかかわる写真や頻繁に差し替える画像を扱う場合は、使用を控えましょう。対象外設定も可能ですので、部分的に採用することも可能です。Photon」を設定します。Url:はランダムは避けてどれか選びましょう。設定後暫くするとCDN経由で画像アクセスするようになります。requestsを見ると、レンタルサーバーのDNS/SSL/Wait(Wordpressのジェネレーション時間?)で100ms~1秒まで変動します。この部分がレンタルサーバーの性能によって大きく変わる部分と思います。現状、通常500ms程度で、100ms以下の場合もあり、理想的な高速なサーバーであれば、0.4S程度反応が早くなるかもしれません。実は、「pagespeed」での測定結果が微妙なんです。PCでは90/100なんですが、モバイルが71/100と微妙な結果となります。Minify」を正しい手順で設定(上記※)、画像CDNは使用したままで、「pagespeed」の完全なレポートでのスコアが、モバイル/パソコンともに98/100となり、一応の満足な結果となり、今後の高速化への施策も見えてきましたので、今回の追求はここまでとします。Analyticsを無効とすれば、100/100)覚書・補足SNS系のプラグインは、意外に重いので、できればテーマ内で処理したほうが良さそう(今後の課題:今後の弊社テーマ「pureframe」の残項目に追加)。Social」で対応、このプラグインは’the_excerpt’を書き込んでいるようなので、’get_the_excerpt()’の使用には注意が必要。Highlighter’などテキストをスキャン、ハイライトしてくれるようなプラグインは大変見やすく利便性は高いのですが重いので、必要なページのみ有効とする等工夫が必要かもしれない。WordpressWordPressで最新記事のリンクバナーを設置する。WordPressで最新記事へのリンクバナーを付けるWordPressで最新記事を表示するのにphpで簡単に実現でき、その方法を紹介したページはたくさんあります。サイドバナーなどで、最新記事への直リンクバナーを作りたい場合は、WidgetのTxtボックスでは、通常PHPは動作しませんから、テーマに手を加えるか、プラグインを利用することになろうかと思います。(あるのかもしれませんが、見つけられませんでした)。なると、自作プラグインもありなのですが、ここではお手軽に枯れたプラグインを利用させて頂くことにしました。日本人の方が作られたもののようですが、大変シンプルなので、これをお手軽改造させて頂きました。タイトル部分と<ul><li>の部分を削除しちゃいます。表示数1とすれば、最新記事へのバナーの完成です。装飾すれば、様々なデザインにも対応できます。タイトル入力がある場合とない場合で処理を分けるようにすると良いかと思います。あとはcssでコントロールでも良いかもしれません。ご利用いただけます!!メーカー様ページ最近の投稿wxpythonで作ったbuttonがWindows10ではアクティブにならない。御社に最適なモールの選びの為にネットショップの作成から運用までサポートパソコンの購入、メンテナンス、トラブル対応などなんでもご相談下さい。私的ブログ私的ブログパソコンのサウンド環境改善しました。