Celtis-one テーマに Favicon 設定

WordPress Celtis-one テーマに、ファビコン、ウェブクリップアイコンを設定する手順を紹介します

また、プログラムに興味がある方の為に、WordPressへアイコン画像をアップロードするのに使用したメディアアップローダのプログラムについても少しだけ紹介します

ファビコンとは

ファビコン(Favicon.ico)は、ウェブサイトのシンボルマークとして、ウェブページに配置するアイコンで、ブラウザのタブ部やブックマーク等に表示されます

アイコンにより、ブラウザ操作時の選択操作を行いやすくするためなので、とにかく目立たせて、他と区別しやすくすることが大事です

ウェブクリップアイコンとは

ウェブクリップアイコン(apple-touch-icon.png)とは、ファビコンと同様な目的のアイコンですが、タブレットやスマートフォンのホーム画面に作成するお気に入りのウェブページヘのショートカットアイコンです

元はアップルのアイフォーン用のものでしたが、 Android 等を含めたモバイル機器の多くで設定できるようになっています

アイコン画像を用意する

まずは、アイコンにする画像を用意します

アイコンの作成はいろいろな方法があると思いますが、私が今回行った手順をとりあえず紹介しておきます

ウェブクリップアイコンの作成

大切なのは、シンプルで目立つことです

写真を使うとファビコンの 16×16 画像ではよくわからない画像となってしまうので、シンボル的なマークや、文字を1~2文字を使って目立つ色にすることがお勧めです

ということで、下のような 144×144 の png形式 の画像を画像編集ソフト等を使用して最初に作成します

webclip

ファビコンの作成

次に画像をファビコンに変換してくれるウェブサービスがいろいろありますので、これらのサービスを利用してファビコンを作成します

今回は、ここのサイトを利用させて頂きました (^^)

ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。|エーオーシステム

favicon-webservice

png 画像から 16×16, 32×32, 48×48 のマルチアイコンを作成出来ます

これでファビコンとウェブクリップアイコンが用意出来ました

参照サイト

登録

以前は、Celtis-one テーマに設定機能を持たせていたのですが、現在はプラグイン化したので celtispack プラグインの設定画面から登録を行います

celtispack プラグインのダウンロードは、WordPress Plugin : Celtispack ページから行うことが出来ます

設定画面を開くと下の方にファビコンとウェブクリップアイコンの登録があります

Favicon-setting

Favicon選択 ボタンをクリックするとメディアアップローダーが表示されるので、ここに先ほど作成した favicon.ico ファイルをドラッグドロップします

Favicon-upload

アップロードが終わるとメディアライブラリに表示さます

Favicon-entry

ファイルを選択して、アイコン選択 ボタンをクリックするとテーマ設定画面に選択したアイコンがプレビュー表示されます

Favicon-preview

同様に、ウェブクリップアイコンも登録します

ここで登録するファイルは、最初に作成した 144×144 の png画像ファイルです

アイコンの選択が終わったら、忘れずに 設定を保存 ボタンをクリックして下さい

※私は携帯を使っているので、スマートフォン等でのウェブクリップアイコンは動作未確認です。また、アイコン画像ファイルの登録は、正しいファイルを登録することを期待していますので、ファイルの形式が違うとかサイズが違うとかのチェックは一切行っていませんので間違えないように注意して設定して下さい m(__)m

以上で、ファビコンとウェブクリップアイコンの設定が完了です

 

新メディアアップローダーについて

ここからは、プログラムに興味がある方向けのアップローダの使い方について紹介します

メディアアップローダは、WordPress 3.5 で新しくなったようです。検索すると古いメディアアップローダの情報が多く入り乱れている感じです
作成しているテーマは、WordPress3.6 以上ようなので新しいタイプを使用します (^^)

なかなか情報が見つけられませんでしたが、この機能を実装するにあたり、次の記事が大変参考になりました

これらの記事で十分と思いますが、簡単にポイントを紹介させて頂きます

設定画面で使う場合の例です

    public function __construct() {

        if(is_admin()) {
            add_action('admin_menu', array(&$this, 'my_option_menu'));        //オプション表示


        }
    }
    
    //設定オプション表示(メニュー)
    public function my_option_menu()
    {
        $page = add_options_page( 'Celtis plugins pack Settings', __('Celtis プラグインパック'), 'manage_options', __FILE__, array(&$this, 'options_form'));
        add_action( 'admin_print_scripts-'.$page, array(&$this, 'my_option_page_scripts') );
    }

    public function my_option_page_scripts()
    {
        //favicon/WebClipicon
        wp_enqueue_media();
        wp_enqueue_script('image-upload', plugins_url('js/image-upload.js', __FILE__), array('jquery') );
    }

 設定画面で wp_enqueue_media() とアップローダースクリプトの image-upload.js を読み込みます

ボタンがクリックされた時にスクリプトから実行されます

  <th scope="row"><label for="fav_icon_url"><?php _e( 'Favicon', 'celtispack' ); ?></label>
    <div id="preview-favicon-url"><?php echo '<img src="'.esc_url( $options[ 'favicon' ] ).'" alt="favicon" />'; ?></div>
  </th>
  <td>
       <p><?php _e( 'ファビコンに ico 形式のファイルを指定して下さい [推奨 16x16]', 'celtispack' ); ?></p>
       <input class="upload" size="55" type="text" id="favicon-url" name="celtispack_options[favicon]" value="<?php echo esc_url( $options [ 'favicon' ] ); ?>" />
       <input class="upload-button button" name="image-add" type="button" value="<?php esc_attr_e( 'Favicon 選択', 'celtispack' ); ?>" />
  </td>

 image-upload.js スクリプトはこんな感じです

jQuery(document).ready(function(){
    var uploadID = '';
    var seltitle = '';
    var divid = '';
    var custom_uploader;
    jQuery('.upload-button').click(function(e) {
        uploadID = jQuery(this).prev('input');
        seltitle = jQuery(this).attr('value');
        divid = jQuery(uploadID).attr('id');
        e.preventDefault();
        custom_uploader = wp.media({
            title: seltitle,
            library: {
                type: 'image'
            },
            button: {
                text: 'アイコン選択'
            },
            multiple: false //選択は1つのみ
        });
        custom_uploader.on('select', function() {
            var images = custom_uploader.state().get('selection');
            //file 選択画像の各種情報
            images.each(function(file){
                fileurl = file.toJSON().url;
                uploadID.val(fileurl);
                divid = '#preview-' + divid;
                jQuery( divid ).empty();
                jQuery( divid ).append('<img src="'+fileurl+'" />');
            });
        });
        custom_uploader.open();
    });
});

 クリックされたボタンの前の要素から、ファビコンかウェブクリップアイコンの選択かを判断して、アップローダを実行します

画像が選択されたら、そのURLを取得して入力エリアにセットして、プレビュー表示します

ほとんど参考サイトのコードのままです (^^)

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss