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. iPhoneの空き容量を確保する方法
  2. WordPress初心者ワークショップをやりました。次回は2月20日
  3. 無料セッション!ホームページ・WordPressのお悩み解決
  4. Internet Explorerの終わり-Microsoftが公式に使用をやめ…
  5. Adobe Premiere Rush CCが超スゴイ!スマホでもPCでもシーム…

関連記事

  1. SEO

    オススメのWordPressテンプレート 2018

    WordPRessには無料で使えるテンプレートが多数用意されています。…

  2. WordPressカスタマイズ

    ビジュアルエディタに独自のクイックタグを追加する

    クイックタグを追加することで、書式の追加の効率が良くなり、記事作成が速…

  3. WordPressカスタマイズ

    WordPressカスタマイズ

    WP管理画面のサイドバーの不必要なメニューを非表示にする

    運用上触ってほしくないメニューが管理画面のサイドバーに表示されているこ…

  4. WordPress初心者ワークショップ 名古屋開催

    SEO

    WordPress初心者ワークショップをやりました。次回は2月20日

    定期的に開催しています、WordPressを全部自分で作っていくワーク…

  5. WordPressカスタマイズ

    WordPressカスタマイズ

    寄稿者にメディアアップロード権限を付与

    組織などで記事を公開するときに上長の承認が必要な場合、権限設定にちょっ…

  6. PHP

    背景色に対して文字色は白か黒か

    W3Cで公開されているアルゴリズムを利用してみる。例えば、…

ピックアップ

  1. さよならインターネットエクスプローラー
  2. WordPress初心者ワークショップ 名古屋開催
  3. wordpress5.0リリース
Webが苦手な人でもできるようになる。ゼロから自分で作るワードプレスワークショップ名古屋開催 デメニギスの30分無料セッション
  1. Adobe Premiere Rush CC

    動画

    Adobe Premiere Rush CCが超スゴイ!スマホでもPCでもシーム…
  2. WordPressカスタマイズ

    WordPressカスタマイズ

    アイキャッチ画像が設定項目がないとき
  3. WordPressの基礎

    WordPressのよく使うテンプレートタグ
  4. ネットの歩き方

    長くても忘れにくいパスワードのつくり方
  5. Rails

    Ruby on Rails チュートリアル
PAGE TOP