MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

WordPressオリジナル管理画面にヘッダー画像選択項目を設ける方法

どうも最近WordPressいじってちょんまげぷりんなキチ野郎です。テーマカスタマイザにあるやつじゃなくて新たにヘッダー画像の管理項目の追加オリジナルページの作り方です。

多分ネタバレしてると思うので言っておきます。こういうやつです。配布テーマを新設サイトWhiteTigerに切り分けたときにお知らせとして使ってるコンテンツ部分です。

さて僕の大嫌い(大好き)なPHP多めで紹介していきます。もしもアフィリエイトの外観を真似したとかはここだけの話にしておいてね(オカンに怒られるから)

オリジナルページを設定に追加

まず、ヘッダー画像を管理するページを設定に追加します。以下のコードをfunction.phpに追加してください。必ず子テーマでの編集お願いします(おっちゃん責任取れない)

add_action('admin_menu', 'custom_headrer_menu');
function custom_headrer_menu() {
  add_options_page('ヘッダー画像管理', 'ヘッダー画像管理', 8, 'custom_headrer_menu', 'tag_options_page');
  add_action( 'admin_init', 'register_tag_settings' );
}
function tag_options_page() {
  get_template_part('custom_headrer_menu_temp');
}
function register_tag_settings() {
  register_setting( 'custom_headrer_settings_group', 'custom_header_settings_image' );
}
function upload_image_tag($name, $value){?>
  <input name="<?php echo $name; ?>" type="text" value="<?php echo $value; ?>" />
  <input type="button" class="button" name="<?php echo $name; ?>_slect" value="画像選択" />
  <input type="button" class="button" name="<?php echo $name; ?>_clear" value="削除" />
  <div id="<?php echo $name; ?>_thumbnail" class="uploded-thumbnail">
    <?php if ($value): ?>
      <img src="<?php echo $value; ?>" alt="選択中の画像">
    <?php endif ?>
  </div>
  <script type="text/javascript">
  (function ($) {
      var custom_uploader; 
      $("input:button[name=<?php echo $name; ?>_slect]").click(function(e) { 
          e.preventDefault();
          if (custom_uploader) {
              custom_uploader.open();
              return; 
          }
          custom_uploader = wp.media({
              title: "画像を選択してください", 
              library: {
                  type: "image"
              }, 
              button: {
                  text: "画像の選択"
              }, 
              multiple: false 
          }); 
          custom_uploader.on("select", function() { 
              var images = custom_uploader.state().get("selection"); 
              images.each(function(file){ 
                  $("input:text[name=<?php echo $name; ?>]").val("");
                  $("#<?php echo $name; ?>_thumbnail").empty(); 
                  $("input:text[name=<?php echo $name; ?>]").val(file.attributes.sizes.full.url);
                  $("#<?php echo $name; ?>_thumbnail").append('<img src="'+file.attributes.sizes.full.url+'" />');
              });
          }); 
          custom_uploader.open(); 
      }); 
      $("input:button[name=<?php echo $name; ?>_clear]").click(function() { 
          $("input:text[name=<?php echo $name; ?>]").val("");
          $("#<?php echo $name; ?>_thumbnail").empty(); 
      }); 
  })(jQuery);
  </script>
  <?php
}    
function mymy_admin_scripts() {
  wp_enqueue_media();
}
add_action( 'admin_print_scripts', 'mymy_admin_scripts' );
※めっちゃユニークにして気を付けていますが、関数の重複だけ無いようチェックしてくださいね。

同じディレクトリに以下のコード追記してファイルを保存してください。ファイル名は「custom_headrer_menu_temp.php」です。

<form method="post" action="options.php">
<?php 
settings_fields( 'custom_headrer_settings_group' );
do_settings_sections( 'custom_headrer_settings_group' );
?>
<div class="postbox">
  <h2 class="hndle">カスタムヘッダー設定
  </h2>
  <div class="inside">
  <table class="form-table">
    <tbody>
    <tr>
      <th class="custom_headrer_settings_group" scope="row">
      <label for="custom_header_settings_image">カスタムヘッダーのイメージ画像を選択してください。
      </label>
      </th>
    </tr>
    </tbody>
  </table>
  <td>
    <?php upload_image_tag('custom_header_settings_image', get_option('custom_header_settings_image'));?>
  </td>
  <?php submit_button('設定を保存します'); ?>
  </div>
</div>
</form>

で、呼び出したいところでheaderの一番下などで以下のコードを追記します。

  <?php
  // カスタムヘッダー設定時表示
  $set_custom_header_image = get_option('custom_header_settings_image');
  if ( $set_custom_header_image ) : ?>
    <?php if ( is_home() || is_front_page() ) : ?>
      <aside id="site-info_field" style="background-image: url(<?php echo get_option('custom_header_settings_image'); ?>)">
      </aside>
    <?php endif; ?>
  <?php endif; ?>

スタイルを追加

style.cssに以下のコードを追記してください。最低限しか書いていないので、その辺あんじょうたのんます。

#site-info_field {
    min-height: 200px;
    padding: 2%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
@media (max-width:780px) {
#site-info_field {
    background-attachment: scroll;
    background-position: center;
}
}

動作の確認

全部追記して疲れて寝てしまったらダメですよ?おっと失礼。脱線するクセがついつい。で、設定に「ヘッダー画像管理」があれば正解です。

クリックするとこういう画面が表示されます。

後は、新たに画像をアップロードするかメディアライブラリからチョイスしてください。一応画像選択があれば表示。無ければ非表示な条件にしてます。

使い方

使い方はそのまんまです。一応パラパラでいきます。

で、トップページを見ると表示されてるのが確認できます。

とりあえずデータベースに保存した値を取り出してるという感じです。

おまけ

おまけでお知らせなフィールドを表示するなら以下のコードを参考にデザインしてみてください。

#site-info_field {
    display: flex;
    min-height: 200px;
    padding: 2%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
@media (max-width:780px) {
#site-info_field {
    background-attachment: scroll;
    background-position: center;
}
}
.info_field-in {
    width: 100%;
    max-width: 1020px;
    background: #fbfaf5ba;
    margin: 0 auto;
    padding: 2%;
    text-align: center;
    border-radius: 5px;
    color: #23282d;
    position: relative;
    font-size: 90%;
}
.info_field-in:before {
    position: absolute;
    top: -10px;
    left: 5px;
    font-family: FontAwesome;
    content: '\f05a';
    color: #4688f4;
    font-size: 40px;
}
.info_field-title {
    font-size: 110%;
    font-weight: bold;
    padding-bottom: 15px;
}
.info_field-text {
    padding-bottom: 25px;
}
a.site-info_btn {
    color: #fff;
    text-decoration: none;
    background: #fb7625e0;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 3px;
}

お知らせ内容は直接書くか、変数に格納echoとかオプション取得などお好きに使ってください。ちなみにflex指定してるのはコンテンツを並べやすいからです。

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください