【WordPress】公式テーマ登録に挑戦　その３【自動フィードリンクとウィジェット】

こんにちは朱夏です。

今回も頑張っていきたいと思います。
前回上手く動かなかったデバッグモード、有効化したのに動かないといった情報はやはりありませんでした。

なので、WordPressアンインストール、データベース削除をして、再度インストールからやり直してみました。
それでも結果は変わらずでした・・・。

一先ずデバッグモードはONにしておきますが、ちゃんと動いていないようなのでChromeのデベロッパーツールで基本的なエラーだけは確認しながらやっていきたいと思います。

ガイドラインの確認はこちらのサイトで行います。

wpdocs.osdn.jp

1 User

9 Pockets

テーマレビュー - WordPress Codex 日本語版

https://wpdocs.osdn.jp/テーマレビュー

ガイドライン以外にも、WordPressに関する基本情報はこのサイトから確認できます。

今回は、ガイドラインの機能について確認していきたいと思います。

機能には、必須のものと推奨のものがあります。
今回は必須のもので、足りないものを追加していきます。

functions.phpの設定に追記をします。

add_theme_support( 'automatic-feed-links' );

他にも色々な設定を追加できますが、必須の機能としてはこれ1つの様です。

次は、ウィジェットを追加できるように設定します。
ウィジェットで追加するものは3つありますが、そのうちの1つはカスタムウィジェットを使う場合にのみ追記が必要になるものです。

• • dynamic_sidebar
  • register_sidebar
  • add_action(widgets_init), register_widget()　※カスタムウィジェットを使う場合のみ

register_sidebarについては既に実装済みなので、dynamic_sidebarを書いていきます。
追加したコードはこちらです。

dynamic_sidebar( '1' );

今回の作業で更新されたコードはこちらになります。

<?php function simple01_setting() {
    // 設定
    add_theme_support( 'post-thumbnails' ); //これはアイキャッチ
    add_theme_support( 'menus'); //これはメニュー
    add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );
    add_theme_support( 'custom-background' );
    add_theme_support( 'custom-header',  array(
        'default-image'          => '',
        'random-default'         => false,
        'width'                  => 0,
        'height'                 => 0,
        'flex-height'            => true,
        'flex-width'             => true,
        'default-text-color'     => '',
        'header-text'            => true,
        'uploads'                => true,
        'wp-head-callback'       => '',
        'admin-head-callback'    => '',
        'admin-preview-callback' => '',
    ));
    add_theme_support( 'automatic-feed-links' ); //自動フィードリンク
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' );
    add_theme_support( 'editor-style' );
    add_theme_support( 'widgets' );
    // 設定
}
add_action( 'after_setup_theme', 'simple01_setting');
?>

<?php function sidebarwidget() {
// サイドバーウィジェット
    register_sidebar( array(
        'name' => 'Sidebar Widget', 
        'id' => 'sidebar-widget',
        'before_widget' => '<li class="widget-container pt-1 pb-4" style="border-bottom: dashed 2px;">',
        'after_widget' => '</li>',
        'before_title' => '<h5>',
        'after_title' => '</h5>',
    ) );
    dynamic_sidebar( '1' );
}
add_action( 'widgets_init', 'sidebarwidget')
?>

自動フィードリンクと、サイドバーウィジェットの追加を実施しています。
そして、必須機能以外にも有用だと思う機能を追加しました。

次に、sidebar.phpを修正しました。

            <div class="col-md-3 my-3 p-0">
               <div class="my3 bg-light">
                  <button onclick="window.open('https://twitter.com/share?url=' + encodeURIComponent(window.location.href) + '&text=' + document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');" class="btn btn-link p-0 m-0" title="Twitter">
                     <span class="p-2 ml-1 my-1 fab fa-twitter rounded-circle text-light" style="background-color: #1da1f2; width: 30px; height: 30px;"></span>
                  </button>
                  <button onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');" class="btn btn-link p-0 m-0" title="Facebook">
                     <span class="p-2 my-1 fab fa-facebook-f rounded-circle text-light" style="background-color: #1578f2; width: 30px; height: 30px;"></span>
                  </button>
                  <button onclick="window.open('https://social-plugins.line.me/lineit/share?url=' + encodeURIComponent(window.location.href) + '&text=' + document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');" class="btn btn-link p-0 m-0" title="LINE">
                     <span class="p-2 my-1 fa fa-comment rounded-circle text-light" style="background-color: #00b900; width: 30px; height: 30px;"></span>
                  </button>
                  <button onclick="window.open('https://getpocket.com/edit?url=' + encodeURIComponent(window.location.href) + '&text=' + document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');" class="btn btn-link p-0 m-0" title="Pocket">
                     <span class="p-2 my-1 fab fa-get-pocket rounded-circle text-light" style="background-color: #ef3f56; width: 30px; height: 30px;"></span>
                  </button>

               </div>
               <div class="my-3 bg-light">
                  <?php if ( is_active_sidebar('sidebar-widget') ) : ?>
                     <ul class="col sidebar-menu" style="list-style: none;">
                        <?php dynamic_sidebar('sidebar-widget'); ?>
                     </ul>
                  <?php endif; ?>
               </div>
            </div>

必須の機能一つ一つ実装していくのにかなり時間がかかりますね。
デバッグが正常に動かないようなので、エラーが残らない様に注意しながら、一つずつクリアしていきたいと思います。

今回はここまでです。
次回もよろしくお願いします。