日本最大のワードプレス無料プラグイン配布サイトホームに移動プラグイン開発チームについて便利なプラグインの無料ダウンロードはこちら無料配布中のテーマプラグイン設定の各種導入サポート体制ワードプレスでトップページだけに読み込ませる外部ファイル(jsとcss)の設定方法カスタマイズ本日は少しワードプレスに慣れた方へ向けた記事となります。ワードプレスではテーマ内に設置する「functions.php」を使えばテーマを細かくコントロール可能です。本日はトップページでのみ読み込ませたいスクリプト(Javascript)やスタイルシート(CSS)がある場合に利用できるナレッジです。以下を簡単に説明しておくとfile_load_scripts_stylesという名前でファンクション(ユーザー定義関数)を作成しています。is_front_pageが「フロントページの場合は」という条件分岐タグです。「if」でくくっているので「もしフロントページなら実行する」という条件文として動きます。'file_load_scripts_styles');?>そしてwp_enqueue_scriptはjavascriptを実行するワードプレス関数です。次にwp_enqueue_styleがCSSを実行するワードプレス関数です。){内に記述されていますので「フロントページでだけ読み込まれる外部ファイル」という意味となります。'file_load_scripts_styles');がテーマのフッター部分(</body>直前)でfile_load_scripts_stylesを実行してくださいという実行文となります。仮に運営中のURLが「http://example.com」で、インストール先が「http://example.com/wp」という状況を想定すると、トップページでのみ以下4つの外部ファイルが順番に読み込まれます。src='https://example.com/wp/dist/js/script2.js'></script>ワードプレスの場合は、マーケティング面を考慮して『トップページのみランディングページとして構築する』シチュエーションも多いです。そのような状況下では上記に書いた条件分岐をfunctions.phpへ記述すれば柔軟な外部ファイル読込みが可能となります。最短1日でワードプレスを引っ越しもしWPインストール先が「http://example.com/wp」になっていて、「/wp」をあえて無視したい場合は以下の記述方法でもOKです。下記のように「/../」で始めれば直前の「/wp」をスルーできます。'file_load_scripts_styles');?>上記の書き方にピンと来ない方は以下URLをクリックすれば意味が分かるはずです。正確には「直前のディレクトリ(上記で言う/wp)を1階層飛ばす」という記述法となります。実際にクリックください。http://example.com/wp/../dist/css/style1.css上記のリンクURLへマウスカーソルを合わせるだけでも確認できます↓スマホであればURLを長押しすれば実際に開かれるアドレスが見れます。上記により「/../」と記述すれば直前のディレクトリが省略されるのが分かりますね。パスの記述は各運営状況に併せた最適な方法であれば問題ありません。最新式のプラグインを事前公開!WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。ワードプレスサイトのマーケティング力をさらに高めるチャンスです。無料でDLしてお試しくださいませ。Consulting集客特化型のオウンドメディア構築を手掛けるワードプレス制作専門部隊。▼ごあいさつ明るい未来を目指す仲間・同志へ向けた指南サイトとしてワードプレスの最新技術を発信しております。当サイトはWordPressの集客力をさらに高める価値のある情報がメインです。数々のパワフルなツールたちが目白押しです。今すぐに共有するお問い合わせTOPへ。