WordPressのフッターはとても便利です。そのため、フッターの仕組みやどのような編集が可能か、事業に関係のないデフォルトのフッター内のコンテンツを削除する方法などを学んでおくべきでしょう。そこで今回は、WordPressでフッターを編集する方法、そのメリットや活用方法を詳しくご紹介します。
ウェブサイトのフッターは、メインメニューに収まらない情報を掲載するのに活用されています。サポートドキュメントへのリンクやSNSページなど、さまざまな要素を挿入することができます。
さっそく見ていきましょう。
WordPressのフッターを編集する方法について、動画での解説もご用意しています。
WordPressのフッターとは?
フッターはWordPressサイトだけにあるものではありません。ほとんどのサイトビルダーやコンテンツ管理システムには、フッター機能が備わっています。しかし、WordPressでは独自のフッター機能が利用できるのに加え、通常、テーマをインストールするとデフォルトのフッターが設定されています。
WordPressのフッターは、ウェブサイトの最後に表示されます。訪問者がどのページを開いていても一番下に表示される、静的なコンテンツエリアです。ヘッダーほど頻繁に利用されませんが、フッターはSNSのボタン、カスタマーサポートへのリンク、連絡先などを掲載できる非常に重要な要素です。
一般的に、WordPressでウェブサイトを作ると、デフォルトでフッターが配置されています。WordPressには、フッター専用のファイル(footer.php)があります。
フッターには様々な形や大きさがあり、色やフォント、背景を編集することができます。また、ブログ記事一覧、セキュリティを証明するマーク、入力フォームや画像などのコンテンツを挿入することもできます。
フッターは、ウェブサイト全体のまとめのようなもの。コンテンツに興味を持ち、もっと詳しく知りたいという人たちに、必要なリンクや情報を表示します。フッターは、スライドショーの最終スライドやスピーチの結びのように、サイト全体のデザインを完成させるものです。
WordPressのフッターが必要である(そして調整すべき)理由
フッターは、ついつい忘れてしまったり、編集を後回しにしてしまったりしがちです。あまり価値を見いだせないため、削除したいと考える人さえ少なくありません。しかし、それはあまりおすすめできません。フッターは、メインメニューや主要なコンテンツほど閲覧されたりクリックされたりしませんが、ちゃんとした価値があるものなのです。
フッターの価値を理解するために、フッターが必要な理由と、WordPressでサイトのデザインに合うように編集する方法を紹介します。
- WordPressのフッターは、ウェブサイトのすべてのページに表示される静的なモジュールです。そのため、クリックすると他のページに移動してしまう通常のページよりも目につきやすいと言えます。
- 視覚的にも、WordPressのファイルの観点でも、ウェブサイトのデザインを完成させる役割を担います。WordPressのコードが終了する場所を指示し、訪問者に対してはコンテンツの切れ目を示してくれます。また、インターフェースもすっきりします。
- 特定のリンクやコンテンツがフッターに表示されていることが多いため、それを探しに直接フッターを確認する人もいます。例えば、サポートへのリンクやSNSボタンなどです。
- フッターは、ブログ記事の最後にあるコールトゥアクションのように、コンバージョンやエンゲージメント増加につながります。フォームや他のコンテンツへのリンク、会社のキャッチフレーズを表示することも可能です。
- メインメニューに掲載しきれなかった重要なリンクも紹介できます。
フッターを使うメリットがわかったところで、次はそこに何を配置するかです。テーマによって異なりますが、新しいテーマをインストールすると、フッターに「Powered by WordPress」のメッセージが表示されるのが一般的です。
また、テーマの開発者が独自にデザインしたデフォルトのデザインや、制作者の名前などが表示されていることもあります。
デフォルトのデザインを使用しても悪くはありません。ただしデフォルトのコンテンツ(テーマ開発者やWordPressのメッセージなど)を削除し、WordPressフッターを編集して、他の重要なページへのリンクや関連するコンテンツを盛り込むのが理想です。また、独自のフォントやカラーでサイトのデザインに合うように調整するのも重要です。
では、WordPressのフッター内に表示すべき要素には、どのようなものがあるでしょうか?
- ニュースレターやブログの更新情報のメールを購読するためのフォーム
- よくある質問、知識ベース記事、フォーラムなどのサポートリソース
- アプリやポッドキャスト、デジタル製品ダウンロードリンク
- 今後のイベント一覧
- ブログの最新記事一覧
- ポイントプログラム、アフィリエイトプログラムのリンク
- 会社概要や採用情報などのページのリンク
- 評判や過去の受賞歴、サイトの安全性をアピールするマークやアイコン
- 各SNSアイコン+リンク
- ウェブサイト全体のナビゲーションを容易にするサイトマップ
- 著作権や、プライバシーポリシー、利用規約などの法的記載事項
- 所在地、電話番号、営業時間、お問い合わせフォーム
- 必要な情報を探しやすくする検索ボックス
- その他、メインメニューに収まらないものの、サイト内に配置する必要があるページ
WordPressでフッターを編集する方法(自己ホスティング型の場合)
WordPress.org(自己ホスティング型)のウェブサイトのフッターを編集するには、いくつかの方法があります。ここからは、テーマカスタマイザー、ウィジェット、プラグイン、コードを使用してWordPressでフッターを編集する方法について説明します。また、Elementorなどのビジュアルページビルダーを使ったWordPressフッターの編集方法も扱います。
テーマカスタマイザーでWordPressフッターを編集する
WordPressのフッターを最も素早く効率的に編集する方法は、標準のWordPressテーマカスタマイザーの利用です。テーマカスタマイザーの設定は選択したテーマによって異なりますが、カスタマイザー自体はWordPress のダッシュボードの所定の場所に必ずあります。
ダッシュボードに移動し、「外観」>「テーマ」の順にクリックします。
次に、現在利用中のテーマの下にある「カスタマイズ」ボタンをクリックします。
テーマを切り替えて、テーマごとにフッターがどのように変わるか試してみましょう。
または、「外観」>「カスタマイズ」をクリックすると、有効化したテーマのテーマカスタマイザーを直接開けます。
WordPressのテーマカスタマイザーでは、右側にウェブサイトのビジュアルが表示され、左側に設定やカスタマイズ機能のメニュー項目が表示されます。繰り返しになりますが、テーマごとに編集機能が異なるため、このスクリーンショットとは少し異なる画面が表示される場合があります。
まずはフッターの色を調整してみましょう。
今回のテーマには「色」というボタンがあります。
ご利用中のテーマにも「色」というボタンがあればそちらをクリックします。
「ヘッダーとフッターの背景色」のメニューにある「色を選択」ボタンを選択します。
カラーピッカーを使用して、様々な色を試し、ご自身のデザイン全体や、ページの風合いに合うものを見つけましょう。
このテーマでは、色を変更するとフォントの色も調整され、どのような背景色であっても文字がはっきりと見えるようになります。
このように、WordPressのフッターの色を濃くすると、リンク、ヘッダー、段落のテキストのフォントカラーが自動的に変更されるので、自分で調整する必要がありません。
今度は、別のテーマで試してみましょう。今回は、「Twenty Twenty」を「Storefront」に変更しました。
Storefrontのカスタマイザーでは、Twenty Twentyにはないボタンが表示されています。
したがって、WordPressカスタマイザーでフッターをどの程度編集できるかは、テーマによって決まります。細かく調整できるものもあれば限られた調整しかできないものもあります。
Storefrontの場合、「Footer」というタブがあります。それをクリックすると、フッターの設定項目が確認できます。
Storefrontは、先ほどのテーマと異なり、背景色を調整しても文字色やリンク色が自動的に変更されることはありません。しかし、「Background Color(背景色)」、「Heading Color(見出しの色)」、「Text Color(テキストの色)」、「Link Color(リンクの色)」の項目があり、自分で調整することができます。
フッターの色の設定
色を選択すると、WordPressのフッターのプレビューに結果が表示されます。「公開」ボタンをクリックすると、フロントエンドに新しいフッターの色が反映されます。
それでは、フッターにデフォルトで表示されるリンクやテキスト要素はどのように調整すれば良いのでしょうか?
こちらに関しても、主な編集方法はWordPressのカスタマイザーになります。ここからは、メニュー項目とウィジェットの2種類を用いて、フッターにテキストやリンクを追加したり削除したりする方法をご紹介します。
WordPressのフッターにウィジェットを追加する
フッターの内容を編集する方法の1つがウィジェットの追加です。WordPressのウィジェットには多くの機能があり、サイドバーやフッターなど、テーマが対応している場所であれば、ウィジェットを自由に配置することができます。
WordPressのカスタマイザーに戻り、「Widgets(ウィジェット)」タブを探します。
サイト内でウィジェットを配置できるエリアの一覧を確認してみましょう。サイドバー、トップメニュー、ボトムメニューなどの選択肢が表示されているはずです。お使いのテーマでウィジェット配置位置としてフッターが選択できればそちらを利用できます。選べない場合、他の方法で編集することもできますが、ウィジェットを使用したい場合は、フッターにウィジェットを配置できる別のテーマに変更する必要があります。
このテーマでは、フッター内の4つの位置にウィジェットを配置することができます。4つのカラムを並べて、なるべく多くのコンテンツがフッター内に綺麗に収まるように配置できます。
ウィジェットを配置したいフッター内の位置をクリックすると、「Add A Widget(ウィジェットを追加)というボタンが表示されます。それをクリックすると、WordPressとテーマで利用できるすべてのウィジェットが表示されます。繰り返しになりますが、テーマによっては独自のウィジェットが付帯するものもあり、拡張機能やプラグインをインストールしてウィジェットを追加している場合、表示される画面は全く違うかもしれません。
代表的なウィジェットには、アーカイブ、オーディオ、カスタムHTML、商品フィルターなどがあります。
選択したエリアに追加したいウィジェットを選択するだけでOKです。ウィジェットは左側に表示され、並び替えたり個別の設定を変更したりできます。
少し編集し、メインメニュー、最新の投稿一覧、ストアの製品の一部を表示したウィジェットを、フッターの3つのカラムに配置しました。また、検索バーを設置して、訪問者がサイト内を閲覧しやすいようにしました。
また、ウィジェットの設定も重要です。各ウィジェットは、左側で個別に設定を調整できるので、目を通して好みの設定にしましょう。
テーマの設定を見るうちにわかると思いますが、すべてのテーマで「Add Menu(メニューを追加)」機能によりフッターエリアに直接メニューを追加できるわけではありません。例えば、このテーマでは、プライマリ、セカンダリ、モバイル用のメニューが選べますが、フッターは選べません。
メニューについては次のセクションで説明しますが、テーマが標準でメニューに対応していない場合に備えて、ウィジェットでメニューを追加する方法をご説明します。
基本的には、フッターモジュールのウィジェットを選択し、ナビゲーションメニューのウィジェットを探すだけです。ここで、ドロップダウンをクリックすると、サイト上で作成したすべてのメニューを表示することができます。フッター専用のメニューを自由に作成し(ダッシュボードの「メニュー」画面から作成できます)、このエリアのウィジェットに適用しましょう。
また、メインメニューや他の作成済みのメニューを選択することもできます。これらはすべて、メニューウィジェットのドロップダウンに表示されます。
その後、フッターエリアにナビゲーションメニューウィジェットを追加し、「公開」をクリックすると、選択したメニューがフッターに表示されます。リンクに説明をつけるには、メニューのタイトルを入力することもできます。
フッターのウィジェットに独自のテキスト、画像、コードを挿入する方法
WordPressのウィジェットの多くで、「最新の投稿」や「検索バー」など、特定のコンテンツが予め設定されています。
しかし、時にはWordPressのフッターを編集して、シンプルなテキストや画像、ちょっとしたコードなど、オリジナルのコンテンツを含め、まったく新しいものを作りたいこともあるかもしれません。
WordPressには、これらに対応したウィジェットが用意されています。
「テーマカスタマイザー」>「ウィジェット」を開きます。そして、フッター内のウィジェットを配置したいエリアを選択します。
「Add A Widget(ウィジェットの追加)」ボタンをクリックし「画像」を検索します。
画像ウィジェットを追加し、タイトルを編集します。「Add Image(画像の追加)」をクリックし、必要に応じて画像リンクを追加します。「Edit Image(画像の編集)」をクリックすると、画像サイズを編集できます。
次は、ウィジェットライブラリで「テキスト」を検索しましょう。
フッターにテキストウィジェットを追加し、好きな文字を入力します。WordPressでブログ記事やページを作成するときと同様に、ビジュアルエディタと共にタイトル入力欄も表示されます。今回、テキストウィジェットを使って画像を挿入しようとしましたが(技術的には可能です)、多くのテーマでは許可されていません。
フッターのデザインを細かく調整したい、メール登録フォームなどの特別な要素を取り入れたい場合は、カスタムHTMLウィジェットを使用しましょう。
ウィジェットライブラリで「HTML」を検索し、カスタムHTMLウィジェットを選択します。
任意のHTMLを入力するか貼り付けるかし、右側のプレビューを見ながら、想定通りに表示されているかを確認します。また、希望のデザインにするにはCSSを追加する必要があるかもしれません。
最後に「公開」ボタンを忘れずにクリックしましょう。
WordPressフッターにメニューを追加する
WordPressでメニューを作るには、「外観」>「メニュー」を開きます。一度メニューを設定すれば、少なくとも利用中のテーマで対応している位置にはすぐに追加できます。
なお、WordPressのカスタマイザー内でメニューを作成することも可能です。メニューに新しいページやリンクを追加する方法としてどちらの方がしっくりくるかによってお選び下さい。
WordPressのフッターにメニューを挿入する方法の動画での解説もご用意しています。
繰り返しになりますが、すべてのWordPressテーマでフッター内にメニューが設置できるわけではありません。実際、メニューを設置できる場所が1つか2つしかないものもあるので、ご利用中のテーマがフッターのメニューに対応しているかどうかご確認下さい。対応していない場合は、先ほどご紹介したウィジェットを使ってフッターにメニューを表示する方法をお試し下さい。
フッターにメニューを表示できるテーマを使用している場合、WordPressのカスタマイザーで「メニュー」タブをクリックします。
ほとんどの場合、空白のメニューページが表示され、いくつかボタンをクリックして内容を決定していきます。そのうちの一つは、表示するメニューと表示する場所を選択するためのものです。「位置の管理」タブでは、ご利用中のテーマでメニューを設置できる場所が表示されます。
最後に、「メニューを作成」ボタンは、基本的にダッシュボードの標準のメニュー作成パネルと同じような役割を果たします。違いと言えば、こちらの場合、カスタマイザーを一度閉じる必要がないという点です。
「メニューを作成」をクリックします。すでにメニューを作成している場合は、「位置の管理」からフッターに追加することができます。
メニューに名前を付け(今回はわかりやすいよう「Footer」という名前にします)、「フッターナビ」のボックスにチェックを入れます。これは、作成した「Footer」というメニューをフッターに表示させたいことを示すものです。この2つは別物です。1つは実際のメニューで、もう1つはメニューが表示されるウェブサイトの領域です。「Footer」というメニューの名前が少しわかりにくいようでしたら、他の名前を使用しても構いません。
パネル下部の「次へ」ボタンをクリックし、次に進みます。
これで「Footer」というメニューができましたが、ボタンやリンクがないので、機能的なメニューとは言えません。
「 Add Items/項目の追加」をクリックして、メニュー内のページへのリンクやボタンを配置します。
新しいパネルが表示され、メニューに追加できるすべてのオプションが表示されます。例えば、内部/外部ページへのカスタムリンク、ブログの記事、自分のサイトのページ(作成済みのページ)、製品、タグ、カテゴリー、その他あらゆるタイプのページを指定できます。
選択した項目はメニューパネルに表示され、並び替えたり、個々の項目をクリックして設定を変更したりすることができます。この例では、ブログ、ライブストリーミングのページ、会社概要のページなど、ウェブサイト内のページへのリンクを5つ追加しました。
フッターに掲載する内容については、冒頭に紹介した一覧を参照してください。
プラグインを用いてWordPressのフッターを編集する
WordPressにはフッターを編集する機能がありますが、サイトのフッターをどの程度カスタマイズできるかは、選択したテーマと、コードをご自身で編集するかどうかによって大きく変わってきます。
おすすめのフッタープラグインについて、動画での解説もご用意しています。
この記事の後半で説明するように、デフォルトの「Powered By」のテキストを削除するには、「footer.php」ファイルを開き、一部のコードを削除する必要があります。したがって、コード記述の経験や新しいテーマを探す意欲がない場合、一部のフッターの編集は難しいでしょう。
そこで、WordPressプラグインの出番です。フッターの編集に関する機能を備えたプラグインは数多く存在します。自身でコードを編集する必要がなくなり、色やカラムなどを素早く変更できる場合もあります。
おすすめのWordPressフッタープラグインは以下の通りです。
- Footer Mega Grid Columns— このプラグインは、お使いのテーマが3列のグリッド形式のフッターに対応していない場合に便利です。テーマの中には、1列または2列までしか対応していないものや、フッターがそもそも存在しないものすらあります。Footer Mega Grid Columnsは、フッターウィジェットを追加して、3列どころか、必要に応じてそれ以上の列を作成することができます。
- Remove Footer Credit— WordPress、もしくはテーマの開発元のクレジットをフッターから完全に削除することができます。また、HTMLコードを入力して、独自のクレジットや、サイトにより適したコンテンツを作成することも可能です。
- Header Footer Code Manager— このプラグインは使いこなすのに少し時間がかかりますが、サイトファイルをいちいち開かずに、ダッシュボードからフッターとヘッダーのコードを編集したい中級WordPressユーザーに最適です。フッターにスタイルやスクリプトを無制限に追加することができ、すべてのブログ記事やページの最後に特定の情報を表示したい時に便利です。
- Footer Putter— このプラグインでは、著作権情報や商標のウィジェットを挿入できます。フッターに、リンクや営業時間、電話番号など、会社に関する情報を表示するのに非常に便利です。
- Footer Text— Footer TextはWordPressのフッターを簡単に編集できるツールの一つで、フロントエンドとバックエンドの編集パネルから、フッター内のコンテンツを編集できます。WYSIWYG (What You See Is What You Get) エディタがあり、テキストの書式を変えたり、写真などを追加したりすることも可能です。
ここからの章では、これらのプラグインを使用してWordPressのフッターにSNSボタンを追加する方法、カスタムコードを挿入する方法をご紹介します。
コードを用いて手動でWordPressのフッターを編集する
より技術的な方法でWordPressのフッターをカスタマイズするには、「footer.php」ファイルを開き、その内容を編集します。
コーディングの経験者か、学ぼうとしている方でないと難しい方法ですが、簡単な調整なら初心者でもできます(フッター内のデフォルトテキストを削除するなど)。より詳しく知りたい方は、ヘッダーとフッターのコードの追加に関する解説記事をご覧ください。
「footer.php」 ファイルにアクセスするには、FTPクライアントを使用します。なお、SFTPは FTPよりも安全なので、SFTPを使用してWordPressに接続する方法もご覧ください。
FTPクライアントを使用してWordPressのサイトファイルに接続したら、「/public」フォルダを探します。「/wp-content」、「/themes」の順にクリックすると、WordPressのダッシュボードに現在インストールされているすべてのテーマが表示されます。サイトで使用中のテーマを確認し、該当のテーマのフォルダを開いてください。
すべてのWordPressテーマのフォルダ内のどこかに「footer.php」ファイルがあります。ファイルの一覧をスクロールして、それを探します。
お好みのエディタでファイルを開きます。あとは、加えたい変更に応じてコードを自由に編集したり、新しいコンテンツを追加したりできます。新しいテキストを挿入するために「get_template_part」セクションを編集することが多いですが、どのようなフッターにしたいかによって異なるので、後はあなた次第です。
もしくは、「footer.php」ファイルのフィールドを視覚的に表示できるプラグインを用いてコードを編集することもできます。この場合、FTPクライアントをインストールし、ウェブサイトに接続する必要はありません。より直感的で初心者に優しい上に、管理画面からいつでも編集作業ができます。
プラグイン「Header Footer Code Manager 」をインストールし、有効化しましょう。
インストールが完了したら、WordPressのダッシュボードに表示される「HFCM」タブをクリックします。スニペットに名前を付け、表示させたい場所を選び、これをフッターに設定します。
一番重要なのは、「Snippet/Code」の欄です。ここに好きなコードを入力できます。フロントエンドに表示されない検証コードやトラッキングコードを挿入するのにこのプラグインを使っている人もいます。ただし、新たなテキストを入力することも、フッターのコンテンツを細かく調整することも可能です。
「Save」をクリックして、結果を確認しましょう。
フッターデザイン機能搭載のページビルダーを使用する
コードやWordPress標準のフッター用機能を使用せずにフッターを編集するもう一つの方法は、ページビルダーです。すべてのページビルダーがフッターの編集機能を備えているわけではないので、現在使用している、もしくはこれから購入予定のページビルダーが対応しているか、調査しておきましょう 。
ページビルダーでWordPressフッターを編集する方法に関する動画解説をご覧下さい。
ただし、これはページビルダーの基本的な機能なので、サイト全体をページビルダーでカスタマイズする予定がある場合のみ、この方法を選びましょう。
フッターの編集機能があるページビルダーはいくつもありますが、個人的なおすすめはElementorとVisual Composerです。
Visual Composerで独自のフッターを作成するには、Pro版の購入が必要です。無料版でもサイトのフッターの一部を調整できますが、フッター専用のドラッグアンドドロップビルダーはアップグレードしなければ利用できません。
インストールが完了したら、ダッシュボードにある「固定ページ」をクリックします。編集したいページをスクロールし、該当のページの「Edit With Visual Composer」をクリックします。
右側にはウェブページのライブプレビュー、左側には要素やテンプレートをドラッグ&ドロップできるVisual Composerデザインツールが表示されます。
美しいフッターを手軽に実装するには、テンプレート(多くは無料です)が便利です。テンプレートを使用すると、おしゃれなフッター(編集可能)がすぐに完成し、サイト全体が一気にプロフェッショナルな雰囲気になります。
「Templates 」タブをクリックし、「Get More Templates」をクリックすると、利用可能なテンプレートを確認することができます。Visual Composerには、ヘッダー、フッター、サイドバーなど、サイトのあらゆる箇所のテンプレートが用意されています。
次の画面では、要素、テンプレート、ブロック、フッターなどのフィルターで分類された、豊富なテンプレートライブラリが表示されます。
「Footers」タブを選択すると、すべてのフッターのテンプレートが表示されます。
繰り返しますが、Visual Composerのこの機能を利用するには、Pro版が必要です。有効化すると、何十ものフッターテンプレートの中から好きなものを選び、自由に編集できます。
フッター編集機能を持つ別のページビルダーに、Elementorがあります。Visual Composerと同様に、Elementorは、トップページ、製品ページ、フッターなどを作成できる本格的なサイトビルダーを搭載しています。
Elementorのフッターコンテンツブロックは無料で利用できますが、実際のフッタービルダーは、Pro版でないと使用できません。Visual Composerと同様に、すべての機能を利用するにはアップグレードする必要があります。
まずはElementorとElementor Header Footer and Blocks Templateの2つのプラグインをインストールし、有効化します。
「テンプレート」>「Theme Builder」をクリックすると、Elementorのサイトビルダーが開きます。
ここでは、ヘッダー、フッター、シングルページなど、サイトのさまざまな部分を編集するメニューが表示されます。
左サイドメニュー、またはページ中央のアイコンでカスタマイズしたい箇所を選択します。ご覧のように、2か所にフッターが表示されています。
フッター編集機能は、Elementorの他のエディタと同様の仕組みです。レイアウトを変更し、スタイルを調整し、ブロックをクリックして新しいコンテンツを入力することができます。Elementorではフッターのすべての要素を編集可能です。フッターの編集方法という観点では、最も柔軟で便利なツールの一つとなっています。
「Header Footer and Blocks」はヘッダーとフッターに特化したコンテンツモジュールを搭載したプラグインです。フッターブロックに関しては、著作権情報、画像、サイトタイトル、キャッチフレーズなどのモジュールを選択することができます。
これらのブロックを利用するには、ダッシュボードの「外観」>「Header Footer and Blocks」を開きます。
また、独自のブロックを作成し、Elementorのページビルダーで編集することも可能です。Elementorで、Headers Footers and Blocksのブロックコレクションまでスクロールし、いずれかを現在のデザインにドラッグして、フッターにコンテンツを追加します。前述のとおり、検索バーやサイトロゴ、カートのアイコン、著作権表示まで、あらゆるものから選択できます。
WordPress.comでフッターを編集する方法
ホスティング一体型WordPress(WordPress.com)のテーマの多くにはフッターがあり、たった数クリックでフッターを削除、編集できる機能が搭載されています。WordPress.com でのフッターの編集方法は、自己ホスティング型の WordPress.orgと似ていますが、いくつか違いがあります。
WordPress.comでフッターを編集する方法について、動画での解説もご用意しています。
まず、インターフェースが少し異なります。
WordPress.comのダッシュボードにログインし、テーマカスタマイザーでフッターを編集します。幸い、WordPress.com向けテーマの多くは、WordPress.orgのそれと似ているか、まったく同じです。しかし、それは同時にWordPress.comのフッター編集方法が、インストールしたテーマによって異なることも意味します。
まず、ダッシュボードで「外観」>「カスタマイズ」をクリックします。
利用中のテーマのテーマカスタマイザーを開きます。ほとんどのテーマには「ウィジェット」メニューがありますが、ウィジェットをフッターに配置できるかどうか確認する必要があります。「ウィジェット」メニューをクリックして確認してください。
今回使用しているこのテーマには、フッターウィジェットのモジュールが用意されています。フッターに配置する選択肢が表示されない場合は、別のテーマを試すか、ウィジェットの代わりにメニューを使用してみましょう。
フッターにウィジェットを配置できる今回の例では、「ウィジェットを追加」をクリックします。
ウィジェット一覧のスライドメニューが表示されます。サイトに最適なウィジェットの種類を選んでください。
ここでも、フッターにいくつウィジェットを配置できるかは、テーマによって異なります。このテーマでは、ウィジェットを3列まで配置できます。
今回は、連絡先と地図のウィジェットを選択し、さらに、訪問者にメールアドレスの登録を促す「ブログをフォロー」ウィジェットを追加しました。
右のプレビューでは、ウィジェットを実際に適用した様子を確認できます。各ウィジェットの設定パネルで、表示テキストなどの要素を設定し、各ウィジェットに表示する欄を選択しましょう。
「変更を保存」をクリックして、ウィジェットがサイトのフロントエンドに表示されていることを確認しましょう。
また、WordPress.comでは、フッターの一番下にサイトのタイトルとWordPressのクレジットが自動的に追加されます。サイトタイトルは通常削除することができますが、WordPressクレジットを削除するにはビジネスプランへのアップグレードが必要です。
これらを変更するには、「サイト基本情報」ボタンをクリックします。
まず、設定の一番下にある「フッタークレジット」の欄を探します。ドロップダウンメニューをクリックすると、オプションが表示されます。
どのクレジットにもWordPressに関する何らかの言及があります。個人ブログやオンラインの日記であれば、WordPressのクレジットが入っていても大して問題ないでしょう。ただし、本格的な商用サイトの場合は、ビジネスプランにアップグレードしてクレジットを削除することをお勧めします。
その後、ドロップダウンメニューをクリックし「隠す」を選択するとクレジットを完全に取り除くことができます。
プレビューからクレジットが消え、サイトタイトルとフッターに追加したウィジェットのみが表示されます。
テーマによっては、フッターからサイトタイトルも削除できます。最も簡単な方法は、「フッターにサイトタイトルを表示」のチェックを外すことです。これにより、フッターとヘッダーのサイトタイトルが表示されなくなります。ヘッダーについては、いずれにせよロゴを使用することをお勧めします。
サイトタイトルとキャッチフレーズを削除する方法はテーマによってさまざまです。削除することができない場合もあれば、そもそもフッターにサイトタイトルが含まれていない場合もあります。「フッターにサイトタイトルを表示」のチェックボックスがなく、やり方に迷った場合は、「サイトタイトル」の欄の文言を削除してみてください。
他にも「メニュー」画面を利用してWordPressのフッターにコンテンツを挿入することもできます。すべてのテーマでフッターにメニューが表示できるわけではありませんが、念のため確認してみましょう。
「メニュー」のタブをクリックします。
「位置の管理」を選択します。利用中のテーマでメニューを配置できる場所の一覧が表示されます。
今回使用しているテーマでは、メニューを配置できるエリアの選択肢は豊富でその中にフッターも含まれています。しかし、すべてのテーマでそうであるとは限りません。そのため、フッターに配置出来ない場合はメニューを変えるか、ウィジェットを使用してフッターを編集してみましょう。
フッターメニューに対応しているテーマでは、「フッター」のドロップダウンメニューをクリックします。
フッターには、あらかじめ用意されている「SNS」のメニューを選びました。適切なメニューがない場合は、「メニューを作成」をクリックしましょう。
フッターに追加したウィジェットの上に、シンプルなテキストのリンクメニューが表示されます。ご利用中のテーマではウィジェットを追加できない可能性があるので、まったく同じ表示にならない可能性もあります。
なお、メニューはすべてテキストとリンクで表示されます。SNSアイコンのメニューなどにしたい場合は、別途対応するプラグインを使用する必要があります。
WordPressのフッターにSNSアイコンを挿入する方法
フッターエリアの主役といえば、定番のSNSボタンです。多くのウェブサイトでメインメニューに表示されていますが、ウェブサイトの下部・上部に配置する代わりに、フッターに組み込むのもおすすめです。ヘッダーの情報量が既に多い場合、代わりにフッターに置けます。
フッターやヘッダーにSNSアイコンやリンクを挿入するウィジェットが利用できるプラグインは数多く存在します。そのため、カスタムコードの利用は必須ではありません。
SNSアイコンに関するプラグインはたくさんありますが、今回の目的は、リンクを追加し、ボタンをカスタマイズできるウィジェットを素早く実装することです。
高い評価を受けている人気のプラグインにWPZoomのSocial Icons Widget & Block by WPZoomがあります。SNSなどのプラットフォーム用の400以上のアイコンが揃っており、アイコンを直接フッターに配置するためのウィジェットが利用できます。それだけでなく、独自のアイコンをアップロードし、色やサイズの設定を変えることもできます。
プラグインをインストールした後、「Settings」画面から必要のないフォントパッケージを無効にしましょう。デフォルトではすべてのフォントが有効になっているので、すべてを試してみたい場合はこの設定をスキップしてください。
WordPressのフッターにソーシャルアイコンを追加するには、「外観」>「カスタマイズ」をクリックします。
WordPressのテーマカスタマイザーで、フッターにウィジェットを追加することができます(お使いのテーマがフッターのウィジェットに対応している場合のみ)。フッターにウィジェットを設置できないテーマの場合、冒頭で述べたとおり、別のテーマを探すか、自分でフッターのコードを編集するしかありません。
次に「Widgets(ウィジェット)」をクリックします。
このテーマには、ウィジェットを設置できるフッター内のエリアが2つあります。ただしこれはテーマによって異なります。お使いのテーマにフッター内のウィジェットエリアがない場合もあります。逆に、運が良ければ、ウィジェットを設置できるフッター内のエリアが4つも5つもあるかもしれません。
いずれかの「Footers(フッター)」のタブをクリックします。
フッターには様々なウィジェット(少なくともインストールしたウィジェット)を追加することが可能です。
「Add a Widget (ウィジェットを追加)」をクリックすると、利用可能なウィジェットの一覧が表示されます。
スライドメニューには、検索バーと使用可能なウィジェットの一覧が表示されます。スクロールして、「Social Icons By WPZOOM」というウィジェットを探します。
これで、サイトのプレビューに、デフォルトのSNSアイコンとボタンが表示されるはずです。
ただし、ボタンのサイズ、色合い、リンク先などの設定をカスタマイズする必要があります。
まず、フッターに表示されるウィジェットのタイトルを入力します(必要に
応じて空欄にすることもできます)。続いて、アイコンラベル、nofollowリンク、アイコン配置などの設定をします。
次に、アイコンのスタイル、背景のスタイル、余白を指定するための設定を行います。また、アイコンのサイズと色も選択することができます。プレビューで変更結果を確認するには、ウィジェットカスタマイズモジュールの下部にある「Save(保存)」をクリックします。
「Icons(アイコン)」の欄には、すでにデフォルトのSNSアイコンがいくつか表示されています。運営しているSNSアカウントのリストを作成し、リンクをコピーしてそれぞれの入力欄に貼り付けてください。必要のないアイコンは削除しましょう。
アイコンライブラリを開いてアイコンを追加するには、リストの下にある「Add More(追加)」をクリックします。
このプラグインには様々な種類のアイコンが揃っており、アイコンの色、マウスを乗せた時の色、アイコンキットのソースを設定する機能も備えています。Sociconsというキットがメインですが、他にもいくつかのキットを無料で利用できます。「Select Icon Kit (アイコンキットを選択)」のドロップダウンメニューをクリックすると、オプションが表示されます。
最後に、各キットのアイコンの一覧を見てみましょう。中には何のアイコンか分からないものすらあるかもしれませんが、アカウントを所有しており、サイトに関係のあるものだけを選びましょう。
今回は、YouTubeのアイコンをフッターにも追加しました。
「Save(保存)」ボタンをクリックしてリストに配置し、ウィジェットボックスの下部にある次の「Save(保存)」ボタンをクリックして、変更内容を確認します。
ご覧のように、今回はアイコンのサイズと形状を変更し、新しいSNSアイコンも追加しました。もし、変更がうまくいかない場合は、ウィジェットの設定に戻り、問題を解決してください。
ウィジェットがウェブサイトのフロントエンドに反映されるように、「Publish(公開)」ボタンを忘れずにクリックしましょう。また、SNSアイコンが正しく表示されているかどうか、フロントエンドを確認することもお勧めします。
WordPressのフッターに背景を追加する方法
フッターの背景は、フッタープラグインやページビルダーを利用することで設定できます。テーマに付属する基本設定を使って、フッターの背景に色をつけたり、画像を配置したりすることも場合によっては可能です。
WordPressのフッターに背景を追加する方法について、動画での解説もご用意しています。
そのどれも機能しない場合のために、WordPressのフッターに背景を追加するCSSコード挿入についてご紹介します。
まず、フッターの背景機能が標準装備されているかどうか、テーマの設定を確認してください。例えば、Abletoneのカスタマイザーには「Footer Background Image」タブがあります。
この設定を使えば「Select Image」ボタンをクリックし、メディアライブラリから画像を検索するか、コンピュータから新しい画像をアップロードするか、好みに合ったストックフォトを探すだけでOKです。
画像をアップロードすると、WordPressのフッターの背景として表示されます。テーマによっては、画像を引き伸ばしたり、並べたりする機能がありますが、CSSを編集しない限り、テーマ付属の設定を利用することになります。
特定のテーマやページビルダー、プラグインがない場合は、CSSコードで(テーマやページビルダーに関係なく)フッターに背景を追加できます。
WordPressのカスタマイザーで「追加CSS」メニューをクリックします。
このCSSコードを貼り付けます。ただし、「YOURIMAGEURL」は、実際に使用する画像のURLに置き換えてください。
footer { background: url(YOURIMAGEURL) repeat; }
画像のURLは、メディアライブラリへのアップロード後、詳細画面で確認できます。
フロントエンドで確認するには、「公開」ボタンをクリックしてください。
また、他にもコードを記述して、サイズや背景の引き伸ばし具合、繰り返しなどの要素を変更することも可能です。ご想像の通り、CSSコードの追加はプラグインのボタンをクリックするよりも少し面倒です。しかし、実際のコードをオンラインで見つけるのは、そう難しいことではありません。
「Powered by WordPress」テキストの削除
前項では、WordPress.comのフッターにあるWordPressのクレジットを削除する方法について説明しました。自己ホスティング型のWordPressサイトのほとんどのテーマでは、「テーマカスタマイザー」でのクレジット削除という方法が利用できないため、少し厄介な作業となります。
そのため、別の方法で、フッターの「Powered by WordPress」テキストを削除しましょう。
フッターに表示される「Powered By WordPress」というテキストを削除する方法は別の記事で詳しく説明しています。この知識ベース記事では、以下のトピックを網羅しています。
- 「Powered By WordPress」のメッセージを削除した方が良い理由
- クレジットを削除しない方が良いケース
- クレジットを削除しようとするときに避けるべき手法
- プラグインでクレジットを削除する方法
- 手作業で「Powered By WordPress」のクレジットを削除する方法
- フッターのクレジットを独自のコードに置き換える
プラグインを使ったフッタークレジットの編集は、一般のWordPressユーザーでもできるほど簡単です。しかし、手作業で行うことで、フッターを完全に制御できるようになり、いちいちこれ専用のプラグインをインストールする必要もなくなります。
「Proudly Powered by WordPress」を削除しても法的に問題はないのか?
WordPressサイトのフッターから「Proudly Powered by WordPress」テキストを削除するのが少し大変なことを考えると、そうすること自体が問題無いのかと心配に思う方もいるかもしれません。
その答えは「問題なし」です。フッターの「Powered by WordPress」テキストを削除したからと言って、法律やWordPress利用規約の違反とみなされることはありません。WordPressの使用はGPL(General Public License)の元で許可されており、誰でも自由に再配布したり、変更したりできます。
通常、「Proudly Powered by WordPress」のテキストは、あなたのサービスやサイトとは何の関係もなく、単に他の組織を宣伝するだけのものなので、削除を強くお勧めします。WordPressを広めるのはいいことですが、自社ブランドや貴重なサイトのスペースを犠牲にしてまですることではありません。
一方で、テーマ開発者が組み込んだフッターのテキストとなると、話は別です。これについては、次のセクションで説明します。
WordPressフッターに表示される「Powered by XYZ Theme」テキストを削除する方法
「Proudly Powered by WordPress」のフッターテキストを削除しても、法律やWordPressの面で問題がないことは、おわかり頂けたと思います。しかし、フッターに「Powered by XYZ Theme」と入れているテーマ開発者については、どうでしょうか?
幸い、WordPressのテーマの大半はGeneral Public Licenseに準拠しているため、そのテキストをサイト固有のものに置き換えてもまったく問題ありません。ただし、テーマ開発者の利用規約で、フッターに開発者のクレジットを表示する旨が規定されていないことを確認するのが得策です。
特定のテーマがGeneral Public Licenseに該当するかどうかを開発者に問い合わせてみましょう。該当しない場合、または「クレジット表示が必須」だと主張された場合には、必ずしも好ましい条件とは言えません。別のテーマを探すことをお勧めします。
では、フッターにある「Powered by XYZ Theme」の文字を消すにはどうしたらいいのでしょうか?
WordPressのフッターから「Powered by WordPress」を削除する方法について、動画での解説もご用意しています。
「Powered by WordPress」テキスト削除系プラグインの中には、テーマ開発者によって設定されたテキストを削除できるものがあります。しかし、これは確実な選択肢ではありません。
そのため、以下のいずれかの方法をお勧めします。
- フッターファイルを直接編集して、クレジットを削除する
- 開発者に削除を依頼する
- テーマの有料版を購入する
フッターファイルを編集するには、少し専門的な知識が必要になりますが、通常、数分もあればできます。テーマの開発者に直接クレジットの削除を依頼して、すんなり事が運ぶ可能性がありますが、開発者の人柄次第です。通常、無料版では、クレジットを削除する設定は利用できません。
そのテーマの有料版を買うのが、最も簡単な解決策でしょう。多くの有料テーマ開発者は、あくまでも簡易的な機能の確認や利用のために無料版を用意しています。優れた機能や細かな調整は有料版に搭載されているものです。
有料版購入や開発者との会話は知識に関係なくできることですので、今回は主に、クレジットを消すためのファイルの編集方法についてお話します。
まず、お使いのテーマのフッターの一番下に開発者によるクレジットが表示されているか確認してください。表示されていたら、文言を正確に記録しておくと、サイトファイル内での発見が捗ります。
FTPクライアントを使用して、(この記事の冒頭で説明したように)サイトのファイルにアクセスします。フッターのクレジットがどこにあるかは、テーマ開発者次第ですが、「/public/wp-content/themes」から見てみましょう。
サイトで有効になっているテーマを選択します。
続いて、テキストエディタまたはPHP IDEで「footer.php」ファイルを開き、クレジットについてのコードを探します。テキストエディタの検索機能を使って、フッターにクレジットとして表示されている文言を調べてみましょう。
ちなみに、このファイルがフッターを削除するための正しいファイルであるとは限りません。テーマ開発者次第です。「footer.php」 ファイルでない場合には、他のファイルも確認してください。
フッターのクレジット情報に関するコードは、「/template-parts」フォルダの中にあることが多いです。この記事での説明のために、テストテーマをインストールしましたが、同フォルダにありました。
「/footer」フォルダに移動し、「site-info.php」ファイルをクリックします。このファイル(またはそれに準ずるもの)には、よくフッタークレジット情報が格納されます。
フッターのクレジットを削除するか、他のものに書き換えるかはご自由にどうぞ。今回は、クレジットフックと下部の「do_action」クレジットコードを削除します。
これでテーマ開発者によるクレジットを完全に削除できます。また、ウィジェットやメニューなどのフッターコンテンツには何の影響も出ていません。
前述のように、フッタークレジットを非表示にしながら、テーマ開発者を支援することができます。テーマの有料版購入です。しかも、はるかに優れた機能も使えるようになります。一般的には、管理画面に「Pro」または「有料」バージョンへのアップグレードボタンが表示されるものです。開発者のサイトで販売されていることもあります。
WordPressのフッターそのものを削除する方法
ほとんどのサイトで推奨されませんが、特定の状況下ではWordPressサイトのフッターを完全に削除することも必要になるかもしれません。
WordPressのフッターがごちゃごちゃしている(ランディングページにありがち)、あるいはフッターが検索エンジンにクロールされない方がいいという場合には、フッターを完全に排除するのも一つの手でしょう。
ただし、WordPressのファイルからフッターを削除するわけではありません。「footer.php」ファイルはWordPressファイルの大事な一部なので、残しておく必要があります。ただし、CSSコードを使用して、フッターとそのコンテンツを表示しないようにすることはできます。
WordPressフッターを完全に非表示にするには、テーマの「カスタマイザー」で「追加CSS」タブをクリックします。
これの目的は、CSSを貼り付けて、WordPressに「フッターを表示しない」ように伝えることです。
この例では、著作権情報からWordPressやテーマ開発者のクレジットに至るまで、すべてを隠します。フッター内のウィジェットやメニューなどの項目を非表示にする場合にも使用できます。
ボックスに以下のCSSコードを貼り付けてください。
footer{
display:none;
}
このコードは、WordPressに「footer.php」ファイル内のすべてを非表示にするように指示します。ファイルそのものは、将来的にコンテンツを再び表示する場合に備えて、ファイルディレクトリ内に残ります。
カスタマイザーのプレビューには、「空白」が表示されています。フロントエンドで結果を確認するには、「公開」ボタンを押してください。
このCSSはほとんどのテーマで使えるはずですが、テーマ開発者のファイル構成次第です。フッターの内容を非表示にするその他の方法として、先に紹介したコードの代わりに、次のコードを使用することもできます。
.site-info { display:none; }
この方法がうまくいく可能性は低いですが、テーマ開発者がフッターの「template-parts」フォルダに「site-info.php」というファイルを作成することは決してあり得ないことではありません。
まとめ
WordPressのフッターは、SNSボタンを追加したり、ブログの最新記事やサポートページ、フォームを表示したりと、さまざまな用途で利用されています。メインメニューにたくさんのリンクを貼ったり、サイドバーを大量のコンテンツで埋め尽くしたりするのは賢明ではなく、このスペースが活用できます。
今回は、WordPressのフッターを編集する様々な方法をご紹介しました。これで、どのWordPressサイトでもフッターの編集やカスタマイズができるはずです。
WordPressのフッターの編集についてご質問があれば、以下のコメント欄でお知らせください。
コメントを残す