WordPressカスタマイズ

ログイン画面のアイコンを変えてみる

WordPressのログイン画面のロゴ部分のHTMLを見てみると、

となっている。
画像を直接挿入しているのではなく、H1タグ配下のAタグの背景画像としてWordPressのロゴを表示させている。

デフォルトのCSSの該当部分だけ抜き出すと以下のようになっている。

この中で background-image の部分を上書きすれば、ロゴの表示を変えられる。

アイコンの画像を変える

path/to/logo-image.png のところに画像のURLを入れれば指定した画像に変わります。
WordPressにアップロード済みの画像を使うこともできます。

テーマテンプレートとセットにしたい場合は、テーマテンプレートフォルダ内に画像フォルダ(images や img)を用意して、そこにロゴ表示用の画像を入れます。
例えば、imagesフォルダを作って、そこに temp-symbol.png というロゴ画像を入れたとすると、

get_template_directory_uri() で有効化している テンプレートのディレクトリの URI を取得できます。

子テーマでカスタマイズしている場合は get_stylesheet_directory_uri() を使う。

サイトアイコンをログイン画面のロゴにする

さらに、サイトアイコンがある場合にはサイトのアイコン、設定してなければテンプレートのアイコンとしたい場合は

画像の設定の仕方は、考え方次第でいろいろできる。

  • 画像を固定で指定する。
  • サイトアイコンを使う。
  • 「外観」→「カスタマイズ」から設定できるようにする。
  • テーマオプションを作って設定できるようにする。

自分のやり方に合わせて仕組みを考えてみよう。

ロゴのリンク先を変える

ログイン画面でロゴをクリックすると、WordPressのサイトに行ってしまいます。
できれば、自分のブログのトップページに行ってほしいものです。

これで、自分のサイトのトップページにリンクされます。

ピックアップ記事

  1. 日程追加!Webが苦手な初心者対象。ゼロから作るWordPressワークショップ…
  2. スマホで動画編集 Adobe Premiere Rush CC編-テロップはPC…
  3. 無料セッション!ホームページ・WordPressのお悩み解決
  4. Webが苦手な初心者対象。ゼロから作るWordPressワークショップ
  5. Adobe Premiere Rush CCが超スゴイ!スマホでもPCでもシーム…

関連記事

  1. WordPressの基礎

    WordPressのよく使うテンプレートタグ

    ブログのURLを取得するhome_url()<?ph…

  2. WordPressカスタマイズ

    アイコンフォント

    アイコンフォントとは以前は「」のようなアイコンを表示させたい場合は…

  3. WordPressカスタマイズ

    WordPressカスタマイズ

    レビュー待ちの投稿で管理者権限のユーザーにメールを送る

    以前書いた記事で、レビュー待ち投稿の時に管理者に自動でメールを送るメモ…

  4. cf7 google sheet connector
  5. WordPressカスタマイズ

    WordPressカスタマイズ

    レビュー待ちの投稿で編集者権限ユーザーにメールを送る

    以前、寄稿者権限のユーザーがレビュー待ちの投稿をしたときに、管理者へ通…

  6. WordPressカスタマイズ

    WordPressカスタマイズ

    アイキャッチ画像が設定項目がないとき

    テーマテンプレートがサポートしていない時function.phpに…

ピックアップ

  1. Adobe Premiere Rush CC
  2. Adobe Premiere Rush CC
  3. WordPress初心者ワークショップ 名古屋開催
Webが苦手な人でもできるようになる。ゼロから自分で作るワードプレスワークショップ名古屋開催 デメニギスの30分無料セッション
  1. ブログと動画とSEO

    SEO

    ブログと動画とSEO
  2. WordPressカスタマイズ

    WordPressの基礎

    WordPressのカスタマイズは子テーマを使う!
  3. WordPressカスタマイズ

    WordPressカスタマイズ

    レビュー待ちの投稿で管理者権限のユーザーにメールを送る
  4. HTML/CSS

    蛍光マーカーのように表示するCSS
  5. WordPressカスタマイズ

    トップに動画が使えるWPテーマ
PAGE TOP