SEOを考慮したGoogle推奨の画像の遅延読み込み処理まとめ
最近のGoogleのPageSpeed Insightsでは画像の遅延読み込みを推奨されますが、いまいち対応方法や情報がまとまっていなかったのでまとめました。WordPress向け対応も記載しています。 Googleはなぜページ表示速度を重視するのか？ そもそもなぜGoogleが、特にモバイルで画像の遅延読み込みを推奨しているかというと、世界中の回線環境の悪いユーザーを意識しているという理由が大きいと思われます。 そのような回線環境が悪いユーザーは、大きな画像をダウンロードすると、全然ページが表示されず、イライラします。ですから、グローバル展開しているGoogleとしてはモバイル向けの表示速度を無視できません。 実際GoogleのPageSpeed Insightsのアドバイスでも、特にモバイルで「画像の遅延読み込み」を推奨されます。 画像の遅延読み込みという対策 上記のような回線環境が悪
wp_body_open() を使ってbody開始タグのすぐあとにソースコードを簡単に挿入する方法 | オレインデザイン
WordPress5.2より追加されましたwp_body_open()というテンプレートタグを使って、<body>タグのすぐ後にソースコードなどを挿入する方法を紹介します。 何をするためのテンプレートタグ？ 主に<script>〜</script>のようなスクリプトを<body>タグのすぐ後に挿入したいということはよくあったと思います。Facebookのスクリプトとかもそうですよね。他にも色々と<body>タグの後に入れたいものはあるはずです。 そういった場合、今までは子テーマでテンプレートファイルの上書きをしなくてはならなくなるので、ちょっとアレですよね…。functions.phpで処理を完結できるのはうれしいですよね。 そういった問題を解消する意図があるような気がします。
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法
『これからはCocoonが天に立つ』 こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon（コクーン）。 ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。 もちろん、僕も機能とデザインに惚れ込み、これまで使っていたSimplicity2からCocoonへ移行しました。 さらに、Cocoonをおしゃれにカスタマイズして、かっこいいブログに仕上げてCocoonライフを過ごしていました。 だがしかし！ 上記の記事を公開してからたくさんの方々に読まれ、いただいた通知の数々。 中でも、「トップページを固定ページにするやり方教えろや！ボケがぁ！！」という問い合わせがかなりありました。 カスタマイズ方法の質問を受けるのですが、ブログ初心者の僕がCocoon（コクーン）のトップページを個性を出すために、様々な試行錯誤があって今にいたっています。
SimplePie : RSSやAtomフィードをパースするクラスライブラリ - WordPress Note
他サイトの「RSS」や「ATOM」を読み込んで、自分のサイトに表示させたい場合に使うライブラリがあります。 以前は「MagpieRSS」にお世話になっていたのですが、WordPress を 2.7 から 2.8 にアップグレードしたとたん、ぱったりと表示しなくなってしまいました…。 （WordPress で作ったサイトの新着記事を、MagpieRSS を使って WordPress でない別のサイトに表示させていました） どうやって修正してよいかもわからないので、とりあえず検索すると、「MagpieRSS」よりエラーも少なく使いやすい「SimplePie」というライブラリがあるとか。「ほんとうにシンプルだったらいいのに〜」と思いながら、祈る気持ちでトライしてみました。 SimplePie RSS や Atom フィードをパースするクラスライブラリ。 配布元 : SimplePie（Ver.
WordPressのbones themeを使ってハマった点
1. headerのdescriptionが空 header.phpに、 <meta name="description" content=""> <meta name="author" content=""> とあるんだが、これをこのままにしておくと当然descriptionもauthorも空のまま。 All in One SEO Packなどを使ってもこれは上書きされないので、やはりSEO的にはよろしくない。 消すか、ちゃんと埋めるか対策すること。 2. comments.phpにhookがいくつかない comments.phpがコメントのテンプレートだけど、デフォルトのcommentsと違う点がいくつかあり、特に注意したいのが、肝心なhookが使われていないこと。 comment_formとか。必要ならば追記して使うこと。 3. Custom post type用テンプレートの注意点
もう悩まない！ WordPressのタイトルと本文の文字数制限を使いこなす
もう悩まない！ WordPressのタイトルと本文の文字数制限を使いこなす TOPページで新着記事を読み込む時。 ブログの記事一覧ページなどで本文を〇文字だけ表示させる時。 みなさんどのように実装されていますか？ 「the_excerpt()」を使う手もあるんですが、 こちらはこちらで色々と自動でタグが入ってしまったり、functions.phpに細々書く必要があったりとメンドクサイ個人的に使いにくいのであまり使いません。 今回は、the_title()とthe_contnet()の文字数制限について、細かめにご説明したいと思います。 基本的にタイトルにはテキストしか入らないので、そんなに難しくありません。 ご紹介するコードも3つだけ。 ① 単純に20文字で制限する<?php echo mb_substr($post->post_title, 0, 20); ?>単純ですね。20文字まで表
WordPress記事一覧を固定ページに複数表示させる方法
WordPress記事一覧を固定ページに表示させる WordPress記事一覧を固定ページに表示させる方法としては、index.phpやcategory.php、tag.phpなどアーカイブ用のテンプレートを作成すれば記事一覧を表示させることができます。 また、カスタム投稿タイプ記事一覧はarchive-slug.php、タクソノミー記事一覧はtaxonomy-slug.phpといったテンプレートを用意することで、それぞれのコンテンツに合わせた記事一覧ページを作成する事も可能です。 ただ、先述したように、サイトトップなどの固定ページで記事一覧を表示させたいケースというのも需要があり、実際の制作でもコーポレートサイトなどで多用することが多いものであったりします。 WordPressでは、固定ページ用にテンプレートを用意して下記をマークアップすることにより、好きな場所に記事一覧を表示させること
固定ページを作成する[page.php][カスタムテンプレート][WordPress]
テーマを一から作成する 第8回目 前回は月別アーカイブページを作成しました。今回は、固定ページを作成します。 第7回目 月別アーカイブページを作成する[date.php] 今回作成する固定ページの構成は、基本的にindex.phpと変わりません。「記事」の部分に固定ページの内容を表示させます。 固定ページを作成するテンプレートは、以下の6つあります。 1 カスタムテンプレート 2 page-スラッグ名.php 3 page-ID番号.php 4 page.php 5 singular.php 6 index.php 固定ページには作成したそれぞれのページに対して、利用するテンプレートを選択する機能があります。今回は「自己紹介」「アクセス」「お問い合わせ」の3つの個別ページを作成し、「お問い合わせ」ページだけカスタムテンプレートを用意して、それ以外はpage.phpを利用するようにします。
【WordPress】Bonesでサイト作ってみた！私が修正したポイント10個
完成したかも?!というテンション上がった勢いだけでテンプレートアップしたら、CSSが修正だらけで大慌てのkairingです。。。しかもAnalyticsまた入れ忘れてたっていう…ｗ さて、 で、 Bonesで作成したサイト公開しました！( ﾟДﾟﾉﾉ”☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁﾊﾟﾁ 毎度のことなんですけど、公開してからあそこもここもちょっと直したい症候群が治らないのですが、一旦締めて修正ポイントをまとめまーす。・・・といいつつGit導入しててんやわんやしたお話は次回・・・ Bonesは常に進化してるっぽい いくつかBonesについて書いてるブログ記事を見つけましたが、Bones自体どんどん更新されていくもののようで、記事を参考に修正しようとすると記述が変わってることもありますのでご注意ください。 1.アイキャッチの表示 index.phpにアイキャッチ表示がなかったので表示。 function
カスタマイズが簡単なWordPressテンプレート『bones』4つの特徴
ぼくは今、ダンス動画を紹介するサイトを運営しています。 一般的にはまとめサイトとか、キュレーションサイトという風に呼ぶのでしょうか。 それがこのサイトです。 すごいオススメダンス動画を紹介『Dance Movie OohWee』 このサイトはWordPressにbonesというテーマをインストールし、このテーマをカスタマイズすることで構築しました。 構築する上で色々勉強になってことがあったので、この記事でお伝えしようと思います。 bonesでサイトを構築した理由 ぼくはhtmlやcssの勉強もかねてサイトを構築したいと考えていたので、カスタマイズすることが前提のテーマを選択しようと思っていました。 そんな時に参考にしたのがこのサイトです。 密かに使ってるカスタマイズ前提のWordPress ブランクテーマ4つ ここでbonesというテーマを見つけました。 色々調べてみると以下のような特徴が
Advanced Custom Fieldsの使い方
目次 中々の大作になってしまったので目次付けときます。 ↓目次を表示する まえがき KoToRiは最近まで「Custom Field Template」を愛用していました。 使い方を詳しく説明した記事も書きました。詳しく書き過ぎて見てくれた人にコメントで注意もされました笑 Custom Field Templateの使い方[WordPress] でも最近『Advanced Custom Fields』に乗り換えました。 理由はいろいろあるのですが一番の理由は編集画面に表示されるフィールドが見やすいからです。 管理画面をなるべく使いやすくカスタマイズするという事に重きを置くようになったのです。今更ですが。 でも調べていくうちに『Advanced Custom Fields』の柔軟性にビビりました。 みなさん、このプラグインが無料なのは凄いことです！ なので『Advanced Custom F
特定のカテゴリ一覧を表示させる｜WordPress | まめー
WordPressで、 ・トップページに「イベント」カテゴリの新着記事のみ5件表示させたい ・「お知らせ」カテゴリと「ニュース」カテゴリを別のエリアに分けて表示させたい という場面はよくありますよね。 つまりは、特定のカテゴリーの一覧を表示させるということです。 今回はそれを実現するために、get_postsとquery_postsを使った方法を紹介します。 スポンサードリンク get_postsとquery_postsの違い なぜ、この2つのテンプレートタグを使った方法を紹介するかというと、query_postsが非推奨になっていることを知ってほしかったからです。 参照：テンプレートタグ/query posts – WordPress Codex 日本語版 query_postsを使うと問題が発生しやすいんですよね。私もquery_postsが原因で、ページ送りがまともに動かず、四苦八苦
【SSL化対応】WordPressのブログの始め方を世界一分かりやすく解説してみた - MUTANT
こんにちは、てつです。 先日、友人と話している際に友人がポツリ。 「WordPressでブログ始めてみようかな・・・」 おぉ、いきなりどうした。 長年の友人がWordPressデビューすると聞いたので一肌脱ごうということに。 彼はクラウドワークスでWordPressの作成してもらうか、自分で参考書籍を買って構築するかで悩んでいたみたいですが、 そんなもの必要なし WordPress初心者・未経験でも自分でWordPressを構築して、なおかつSSL化に対応したWordPress構築方法を記事にまとめました。 今回はこういった方を対象に記事を書いています。 WordPressを始めるのはこれが初 WordPressで独自ドメインの設定方法がよく分からない WordPressでどこのサーバーを選べば良いのか分からない 特にWordPressでのサーバー選びは悩み所だと思います。サーバー会社はた
「htmlすら知らなかった私が2週間でWordPressの新テーマを作成するまでにやったこと」と参考にした記事まとめ
どうも、@OZPA です。 先月、当ブログのテーマをWordPressにて自作した私。 しかしながら、実はそれまでWordPressの知識どころかhtmlすらろくすっぽきちんと理解していない人間だったのです。 今回はそんな私がWordpressのテーマを一から自作するまでにやったことを備忘録がわりに纏め上げておこうかと思います。 ひとりじゃ出来なかった 今回、テーマを作り始めたのが2011年の12月29日、そしてテーマが完成したのが年が開けて1月の12日。 だいたい2週間弱で自作テーマ発表まで漕ぎ着けたわけなんですが、そこにはそうそうたる方々によります手助けがありました。 そんな方々に敬意を払いつつ、テーマ自作までにやったことと手順を備忘録として残しておこうかと。 WordPressのテーマ作成の手順 さて、WordPressのテーマを作成するためには、 0.WordPressをローカルに
wp_headの不要なコードを削除する方法をまとめました
wp_headで出力されるコードには不要なものがたくさん含まれています。また、使う必要のないファイル（WordPressに入っているjQueryやWordPressプラグインのCSS）がwp_headを通して読み込まれてしまいます。 今回はこれらの問題を解決する方法を紹介します。 wp_headの役割 wp_head関数は、headタグ内に表示するためのさまざまなコードを出力します。これらのコードは、wp-includes/default-filters.phpで設定されています。 また、WordPressプラグインの中には、wp_headアクションを使ってCSSやJavaScriptを出力するものがあります。これらのプラグインはwp_head関数を削除すると正常に動作しなくなります。そのため、テーマを自作する際にはheadタグ内にwp_headを記述する必要があります。 コメントのフィー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://wckansai2016.github.io/wordpress-document/
うさちゃんねるフロンティア
https://www.cloudot.co.jp/wp-content/uploads/2022/08/blog.jpg
ページごとにヘッダー、サイドバー、フッター部分だけ変更する | Web Labs
