8-2. 自作コード（＋ショートコード）でサイドバーを作る

🌸実案件ではサイドバーの表示内容はテンプレートに直書きし、固定にしてしまうことが多い。

→ 8-1. のウィジェットを使った表示だと、WordPressに詳しくないクライアントの場合、誤って消してしまったり、意図せぬカスタマイズによりデザインが崩れてしまうリスクがあるため

【目次】

プロフィールと検索ボックスを作る

「sidebar.php」にプロフィールと検索ボックスのコードを作成する

※「1. HTMLファイルを index.php (WPのテンプレートファイル)に変換する」で既に作成済みなら飛ばしてOK、ただし、検索ボックスのaction属性だけは「<?php echo home_url('/'); ?>」に書き換えておく。

念のため、下記にTF-30の例を記載しておく

<!-- secondary -->
<aside id="secondary">

    <!-- widget_custom_html -->
    <div class="widget widget_text widget_custom_html">
        <div class="widget-title">プロフィール</div>

        <div class="wprofile">
            <div class="wprofile-img"><img src="<?php echo get_template_directory_uri(); ?>/img/profile.png" alt=""></div>
            <div class="wprofile-content">
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
            <!-- /wprofile-content -->
            <nav class="wprofile-sns">
                <div class="wprofile-sns-item m_twitter"><a href="" rel="noopener noreferrer" target="_blank"><i class="fab fa-twitter"></i></a></div>
                <div class="wprofile-sns-item m_facebook"><a href="" rel="noopener noreferrer" target="_blank"><i class="fab fa-facebook-f"></i></a></div>
                <div class="wprofile-sns-item m_instagram"><a href="" rel="noopener noreferrer" target="_blank"><i class="fab fa-instagram"></i></a></div>
            </nav>
        </div><!-- /wprofile -->
    </div><!-- /widget_custom_html -->

		<!-- widget_search -->
		<div class="widget widget_search">
		    <div class="widget-title">検索</div>
		    <!-- search-form -->
		    <form method="get" class="search-form" action="<?php echo home_url('/'); ?>">
		        <input type="search" class="search-field" value="" placeholder="キーワード" name="s" id="s">
		        <button type="submit" class="search-submit"><i class="fas fa-search"></i></button>
		    </form><!-- /search-form -->
		</div><!-- /widget_search -->
			
</aside><!-- secondary -->

<aside> 💡 WordPress標準の検索フォームを設置したい場合

<?php get_search_form(); ?>でデフォルトの検索フォームを設置出来る。

なお、デフォルトの検索フォームは「searchform.php」というファイルを読み込むため、あえてこのファイルを作成し、ここにオリジナルの検索フォームコードを記述、「sidebar.php」には<?php get_search_form(); ?>を記述するという手もある。

</aside>

プロフィールと検索ボックスを作る

人気記事トップ5を表示する

完全自作の場合