WP:WordPress(ワードプレス)

WordPress管理画面上部のバーにリンクを追加

先日お客様から、

「WordPressの管理画面から別のサイトへ移動できるようにリンクを貼って欲しいんだけど」

というご相談を頂きました。

 

以前一度同じ様な事をやったので、当然出来ます!!

との返答をしたのですが、

以前行った作業内容を覚えていないので、

もう一度方法から調べ直しです。

 

なので、今回はちゃんと記録を残しておくことに。

やりたいことは、
WordPress管理画面上部のメニューバーの部分に、お客様から指示を頂いたURLへのリンクメニューを追加するだけです。

function add_link_other_site( $wp_admin_bar ) {
    if (is_user_logged_in() ){
        $wp_admin_bar->add_node(array(
        'id'    => 'yahoolink',
        'title' => 'Yahoo',
        'href'  => 'http://www.yahoo.co.jp/'
        ));
    }
}
add_action('admin_bar_menu', 'add_link_other_site', 100);

こんな感じで、メニューバーに表示されます。
WP Yahooへのリンクを追加

 

さらに、Googleへリンクも貼りたい場合には、

function add_link_other_site( $wp_admin_bar ) {
    if (is_user_logged_in() ){
        $wp_admin_bar->add_node(array(
        'id'    => 'yahoolink',
        'title' => 'Yahoo',
        'href'  => 'http://www.yahoo.co.jp/'
        ));
        $wp_admin_bar->add_node(array(
        'id'    => 'googlelink',
        'title' => 'Google',
        'href'  => 'http://www.google.co.jp/'
        ));
    }
}
add_action('admin_bar_menu', 'add_link_other_site', 100);

こんな感じで、メニューバーにGoogleへのリンクが追加されます。
WP Googleへのリンクを追加

 

簡単ですね!!

 

ただ、

これだとリンクをクリックした際には同一画面で遷移してしまい、

個人的には非常に使いづらく感じてしまいます。

 

そこで、以下のコードも追加することで、

別画面(target="_blank")遷移するようにしてやります。

function add_link_target_blank() {
    if (is_user_logged_in() ){
print<<<EOF
    <script type="text/javascript">
        jQuery(function($) {
            $('#wp-admin-bar-yahoolink a').attr('target', '_blank');
            $('#wp-admin-bar-googlelink a').attr('target', '_blank');
        });
    </script>
EOF;
    }
}
add_action( 'admin_head', 'add_link_target_blank' );

 

add_link_other_site()の関数の中で、

それぞれ、

「yahoolink」「googlelink」というIDを設定しているので、

>> $('#wp-admin-bar-yahoolink a').attr('target', '_blank');
>> $('#wp-admin-bar-googlelink a').attr('target', '_blank');
のコードを追加することで、

それぞれの<a>タグに「target="_blank"」という属性を追加するイメージです。

0
この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

  • コメント: 0

関連記事

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

最近の記事

  1. WP:WordPress(ワードプレス)
  2. WP:WordPress(ワードプレス)
  3. 文系と理系のメリットとデメリット
  4. 東京駅
  5. 残業
  6. プログラマーになるのに年齢は関係ある?
  7. 年収(収入)
  8. income(収入)
  9. プログラマーになろう
  10. オンライン学習支援サイト

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

アーカイブ

PAGE TOP