Core Web Vitalの連載第8回では、JSおよびCSSの最適化について説明しよう。配信の最適化（Gzip圧縮、CDN、ブラウザキャッシュ）についてはすでに第1回「リソース配信の最適化」で説明したのでそちらを参照して欲しい。今回最適化するのは次の項目である。 不要な読み込みをなくす（特にプラグイン）CSS・JS自体を分割し、必要な時だけ読み込む。 この作業はかなり面倒くさく、サイトごとにチューニングが必要になる作業なので、運用歴の長い既存サイトで導入するのはかなり骨が折れるだろう。だが、最終的にはこの作業をやらないと「使用していないCSS / JavaScriptの削減」という項目をなくすことができない。 なにより、ユーザーに余計なデータをダウンロードさせないことは、ユーザー体験の向上につながるだろう。 不要なJS/CSSの読み込みを停止 まずは不要なCSSとJSの読み込みを停止する

WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです！ ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP

ホームページを開設する際は、HTMLやCSS、JavaScriptなどの知識が必要となりますが、WordPressを使用すればお願いできるエンジニアがいない、知識がない、という方でもテンプレートやプラグインを使用して簡単にホームページを開設することができます。 今回は、WordPressでホームページを開設する際の公開前の作業を効率化してくれる便利な無料プラグイン4つをご紹介します。 各プラグインの使用方法もあわせてご紹介していますので、手順に従って設定を行ってください。 なお、プラグインを利用する前に念のためバックアップをとっておくことをオススメします。 1.WP Maintenance Mode インストールはこちら こちらは、WordPressで作成したホームページを公開する前のメンテナンス画面を表示することができるプラグインです。 公開前だけではなく、ホームページのリニューアルなど

WordPressには『プラグイン』っていう便利な機能があります。プラグインっていうのは、拡張機能の事です。プラグインを適切に選んで使う事ができれば、例えば集客の効果を高める事ができたり、アクセスアップなどにもつなげられます。

「Retina な Mac を買ったはいいけど、自分のWebサイトやブログの画像がぼやけて見えるのが気になる」という方は多いと思います。 ロゴ画像であれば Illustrator から SVG 形式で書き出すだけで対応できますが、やっかいなのがブログ本文内の画像です。 メインビジュアルの画像など限られたものであれば、たとえば「image.jpg」という画像の Retina 用として「image@2x.jpg」という縦横2倍の画像を用意することもできると思います。 しかし、ブログ本文内の画像は数も多く、「image@2x.jpg」のようなファイル名の画像もいちいち用意していられないと思います。 そこで、このブログでは jQuery 用の JavaScript を使ってなるべく手間のかからない対応をすることにしました。 このブログでは、WordPress で記事を書くときに［メディアを追加］を

WordPressの管理画面へのログイン時のURL(wp-login.php)を簡単に変更できる国産プラグインを紹介します。 管理画面に総当たり攻撃をされて困っている人は是非お試しください。 当ブログはこのプラグインを使用して解決しました、作者様に感謝！ Login rebuilder -Plugin Directory Login rebuilder公式ページ（日本語） Login rebuilderのインストール Login rebuilderの設定 Login rebuilderのインストール WordPress公式のPlugin Directoryから通常のプラグインと同様にインストールできます。 管理画面の「プラグイン」から「新規追加」を選択。 「プラグインの検索」に「Login rebuilder」を入力して検索。 「Login rebuilder」の「いますぐインストール」を

WordPressを使ってサイトやブログを構築する際、例えば「一覧と詳細でサイドコンテンツを変えたい」とか「カテゴリーによって表示内容をガラッと変えたい」のように「○○の時に○○する」といったことをしたい場合に用いるのが条件分岐です。 WordPressには便利な条件分岐タグが沢山用意されており、それらを用いることで様々なことができるので、先述したように特定の条件で何か処理を行うカスタマイズをしたい方は参考にしてみてください。 条件分岐の使い方 条件分岐とは、簡単に説明すると「指定された条件に合うか・合わないかを判断し、判断に応じて処理を行う」というものになり、例えばWordPressの場合であればこれを利用することによって、同じテンプレートを使用していても条件に応じて全く違う見栄えにしたり、処理を行うといったことが可能です。 条件分岐にはswitch文というものもありますが、ここで紹介し

作成：2015/02/23 更新：2016/06/29 WordPress > 本番サーバ移行前に何をすればよかったのか確認しておきたい、自作テーマに記述し忘れたことはなかっただろうか。今回はサイト移行時や構築時に毎回確認してしまう使用頻度の高い小技をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 移行中 １．移行中にメンテナンス画面を表示する ２．旧url から新url へのリダイレクト ３．一時的にキャッシュを制御させる パフォーマンス ４．非同期で読み込む ５．jQueryや外部 JavaScript の競合を避ける ６．旧IEでCSS3を再現 ７．問い合わせのコンバージョン設定 functions.php に追加しておきたいもの ８．メディアアップローダーを自作テーマに組み込む ９．ビジュアルエディタをカスタマイズ １０．RSSにサムネ

All in One SEO Packは、簡単にWordPressのSEO対策が行えるプラグインです。Titleタグ、meta descriptionタグ、meta keywordタグ、noindexの設定などがページごとに行えるようになります。トップページや投稿ページは勿論のこと、固定ページ、カテゴリページ、著者ページ、404エラーページ、検索結果ページなどを広くSEO対策することが可能です。 All in One SEO Pack WordPress SEO by Yoast WordPress SEO by Yoastは、All in One SEO Packを高機能にしたプラグインです。各ページのタグ設定やnoindex, follow設定の他にも、OGPやTwitter cardの設定や、「category」スラッグ削除、構造化されたパンくずリストの設置など、他のプラグインをいく

WordPressには世界中の開発者が制作した機能を自由に組み込むことができる「プラグイン」が存在します。プラグインを上手く活用することが、WordPressの魅力を最大限に引き出すポイントです。 そこで今回は、私がWordPressで様々な種類のWebサイトを制作してきた経験から、役立つプラグインを厳選してご紹介します。いずれも無料でも使用できるので、ぜひ活用してみてください。 WordPressプラグインとは WordPressプラグインとは、WordPressの機能を拡張させるための仕組み（ツール、モジュール、パーツのようなもの）です。 WordPressの本体は、ユーザーの様々なニーズに柔軟に対応できるように基本的でコアな部分のみで設計されています。WordPressプラグインを使うことで、ニーズに合わせた様々な機能を持ったサイトを構築することができます。 参考：WordPress

通常サイトのスマホやタブレットの振り分け方法 まずはWordPress以外のWebサイト制作でも使える、スマホやタブレットの判別方法についてです。今年はWebサービスを作りたいとも思っているので、その時のスマホ振り分けにも使えそうです。 PHPの関数で振り分ける方法 Googleで検索すると、山のように見つかる、PHPによるスマホとPC・タブレットの判別方法です。もっともシンプルな書き方を紹介しますので、スマホやタブレットの機種などは好みで追加変更してください。 [php] function userAgent() { $ua = $_SERVER[‘HTTP_USER_AGENT’]; if(preg_match(‘#\b(iP(hone|od);|Android.*Mobile )|Windows.*Phone|blackberry.*|PSP|3DS|Vita#’,$ua)){ $u

プラグインのインストール 下記のボタンからサイトにアクセスして、プラグインをダウンロードできます。 MTS Simple Bookin C 初期設定 プラグインを有効化すると、管理画面に「予約システム」という項目が追加されます。その中にある「各種設定」にアクセスしてください。順番に紹介する各種設定をそれぞれ完了した後は、必ず「変更を保存」をクリックしてください。クリックせずに、次のタブに進むと設定が保存されません。 予約パラメータ内の設定 予約の受付のチェックボックスにチェックを入れます。チェックを入れることで、予約受付中になり、外すと予約の受付ができなくなります。受付を行っていないときに表示するメッセージは任意に設定可能です。基本的にそれ以外の設定は変更不要ですので、「変更を保存」をクリックし次へ進みます。 施設情報の設定 施設の名称や、住所、連絡先などの基本情報を入力します。予約された

WordPressには、いくつかのプログラム言語が利用されています。 具体的には以下のような言語です。 PHP HTML CSS JavaScript（jQuery） 細かなことを言えば、他にも使用されているものはありますが、ユーザーが編集するものと言えば大体はこの4つです。 今回は、これら4つの言語のコードを綺麗に整形してくれるツールの紹介です。 コード整形ツールとは コード整形ツールとは、書き方の定まっていないプログラムコードなどを、記法を統一して綺麗に書き直してくれるツールです。 WordPressテーマ作成や、カスタマイズで、コードをググッてよそからコピペ編集で使うときなどに、自分に合った記法に変換して使えます。 例えば、以下のようなことを、まとめて行いたい時に使うと、手動でやるより編集時間を大幅に短縮できます。 コードに適切なインデントを自動で設定する インデントをタブからスペー

バリ島の日本語地図が集結! バリ島地図.jp｜ 子テーマの作り方は超簡単 WordPress のデザインに手を加える際は デザインテンプレートを直接編集したりせず、 まず 子テーマ を作りますよね！？ 最小構成の WordPress 子テーマは /wp-content/themes/ にフォルダを作り、 以下の style.css ファイルを配置するだけです。 /* Theme Name: Child Theme // 子テーマ名 Template: xxxxx // 親テーマのディレクトリ名 */ @import url(../xxxxx/style.css); // この下に子テーマの CSS を記述 子テーマ側でカスタマイズをすることで テンプレートのアップデートを適用しても カスタマイズ内容を失わなくなるので、 大体の人は知っていると思います。 正しい WordPress 子テーマ

Contact form7を使ってるとスパムメールが多い… こんにちは、Webマーケッターの荒木です。 Contact form7を使っていると、スパムメールがめちゃくちゃ来ませんか？ このサイトでもContact form7を使っているのですが、スパムメールが毎日のように来てました。 多い時には30通くらい来る時があって、これを処理するだけでも非常にストレスです。 面倒くさくなって放置していると、たまに大事なメールもあったりして、焦るときがあります。 同じようなストレスを感じている方もいると思いますので、今回はContact form7でスパムメールをブロックする方法をご紹介します。 超簡単ですので、是非やってみて下さい。 まずContact form7の設定画面を開きます。 「フォーム」の[タグの作成]をクリックして、[承認の確認]を選択します。 表示されているショートコードを左のフォ

WordPressで運用しているサイトをほかのサーバに引っ越しをしたり、あるいはテスト用に別の環境にコピーするのは意外と骨が折れる作業です。データは何とか移したものの、重要なプラグインが入ってなかったり、テンプレートも移してなかったりなどなど、やらなければならないことが多いことに気がつかされます。 そこでオススメしたいのが、「Duplicator」というWordPressのプラグインです。これを利用すると、記事だけではなく、テンプレートやプラグインも含めて、まるごとそのままほかの環境にコピーできます。 「Duplicator」とは 「Duplicator」はサイトの引っ越しやバックアップがとれるWordPressプラグインです。 無料版でも引っ越しやバックアップは可能。 元サイト→新サイトへの引っ越しが可能 バックアップデータを取ることも可能 WordPressダッシュボードの左メニュー（

h2の見出し、コンテンツ（テキストや画像）、h2の見出し、コンテンツ（テキストや画像）、、、と実装されたシンプルなHTMLをアニメーションで開閉するアコーディオンにするjQueryのプラグインを紹介します。 ↓上の赤いボタンは切替で、見出し付きのコンテンツをアコーディオンにしています。 「Some amazing header」「And yet another」が見出しです。 Magic Accordion Magic Accordion -GitHub Magic Accordionのデモ Magic Accordionの使い方 Magic Accordionのデモ スクリプトのコンセプトは、WordPressなどのCMSで簡単に利用できるようシンプルなコードからアコーディオンが生成できるよう設計されています。 デモは上部に切替ボタンがあり、見出し付きコンテンツの状態、それをアコーディオ

WordPressプラグインのダウンロードランキング・トップ200！！実質1位は日本発のあのプラグイン 2014 8/12 WordPressというオープンソースのソフトウェアがあります。 ネット関連の仕事をしてる人や、ブログをやっている人なら聞いたことがある方も多いと思いますが、世界中のウェブサイト構築に使われている大人気のソフトウェアです。 僕はWordPressが大好き・得意でして、仕事でも凄く使っています。 勿論、このブログもWordPressで出来ていますし、以前に「誰かが記事をコピーしたら教えてくれるプラグインCCC(Check Copy Contents)を作ってみた」でも書いたようにプラグインも時々作ったりもしてます。 WordPressを使ったサイト構築のお話があれば是非どうぞ（宣伝） WordPressプラグインのダウンロードランキング さて、WordPressの人気の

当記事はInstant WordPress v4.3.1時点のものです。僕が確認した時点のv5.3以降では、インターフェースが新しくなり、以下のインストール手順は異なるものになってしまったのでご了承ください。 新しいInstant WordPressの利用方法は、InstantWPのインストール方法と使い方を参照してください。 今回は、Windowsに、これ以上無いくらいに簡単にWordpressローカル環境を構築する方法の紹介です。 僕は2台のWindowsパソコンを持っています。そのうち1台は、Bitnami for XAMPPを使ってローカル環境を構築しました。これが結構めんどくさかった。Bitnamiを使った方法もあるのですが、Instant WordPressを使用すれば、それよりもさらに手順を短縮できます。 僕は2台目のパソコンは、Instant WordPressでローカル環