Zenn
📑

WordPressテーマのウィジットのコードをご紹介。GitHub Copilotは、プログラミングの先生にもなる？

2022/10/07に公開
HTML
PHP
WordPress
Copilot
tech

今WordPressテーマを自作して、HTMLページをWordPress化しようとしています。
そして、サイドバーが表示されないので、ネット検索しながら悪戦苦闘していました。

試しに Copilotに、

//WordPressでサイドバーが表示されない原因は、

まで書いてみました。
すると、コメントとして順番に、下記の文章を書いてきました。
しかも、出力してきたコードは、私が書いているコードのHTMLのタグを読み取って反映させています。
VSCODEで開いている他のファイルを読み、判断しているように思われます。

そして、サイドバーが表示されない場合の確認項目も、Copilotが教えてくれました。

Copilotの回答


<?php

//WordPressでサイドバーが表示されない原因は、
//テーマのfunctions.phpにサイドバーを表示するためのコードがないからです。
//functions.phpにサイドバーを表示するためのコードを追加すると、
//サイドバーが表示されるようになります。
//functions.phpにサイドバーを表示するためのコードを追加する方法は、
//以下の通りです。

//functions.phpにサイドバーを表示するためのコードを追加する方法
//1.テーマのfunctions.phpを開く
//2.以下のコードをfunctions.phpに追加する

//サイドバーにウィジェット追加
function widgetsidebar_init()
{
    register_sidebar(array(
        'name' => 'サイドバー',
        'id' => 'side-widget',
        'before_widget' => '
<div id="%1$s" class="%2$s sidebar-wrapper">',
        'after_widget' => '</div>',
        'before_title' => '<h5 class="sidebar-title">',
        'after_title' => '</h5>'
    ));
    register_sidebar(array(
        'name' => 'MTサイドバー',
        'id' => 'mt-side-widget',
        'before_widget' => '<div class="side-header">',
        'after_widget' => '</div>',
        'before_title' => '<div class="side-header">',
        'after_title' => '</div>'
    ));
}

add_action('widgets_init', 'widgetsidebar_init');

//3.サイドバーを表示したいページに以下のコードを追加する

//サイドバーを表示するためのコード
<?php get_sidebar(); ?>

//4.サイドバーが表示されるか確認する

//サイドバーが表示されない場合は、
//functions.phpにサイドバーを表示するためのコードを追加しているか確認する
//functions.phpにサイドバーを表示するためのコードを追加している場合は、
//サイドバーを表示したいページに以下のコードを追加しているか確認する

Copilotは、凄すぎる。

実は、別の件でCopilotが書いたコードをそのまま使ったのですが、意図した通りに動きませんでした。
それで、Copilotが書いたコードを検証が本当に必要と痛感しました。
ですが今回、質問したら回答してきたので、凄いと思いました。

Copilotの使い方を試行錯誤して私の生産性が上がるように、精力的に取り組んでいきたいと思っていいます。

無事にウィジットをサイドバーに表示できたコード

下記のコードをWordPressテーマのfunctions.phpに書いたら、ウィジットを表示できました。
WordPressの標準のウィジットを表示できました。
MTサイドバーは、私が設置したかった部分なので通常は、不要です。
idをsidebar-1にすると、WordPress標準のウィジットが使えます。
3カラムで左右にウィジットを設置したい方は、このコード全体が参考になると思います。

//サイドバーにウィジェット追加
function widgetsidebar_init()
{
    register_sidebar(array(
        'name' => 'サイドバー',
        'id' => 'sidebar-1',
        'before_widget' => '
<div id="%1$s" class="%2$s sidebar-wrapper">',
        'after_widget' => '</div>',
        'before_title' => '<h5 class="sidebar-title">',
        'after_title' => '</h5>'
    ));
    register_sidebar(array(
        'name' => 'MTサイドバー',
        'id' => 'mt-side-widget',
        'before_widget' => '<div class="side-header">',
        'after_widget' => '</div>',
        'before_title' => '<div class="side-header">',
        'after_title' => '</div>'
    ));
}

add_action('widgets_init', 'widgetsidebar_init');

WordPressの投稿ページのソースコード

固定ページや検索結果の表示、404エラーページなどのテンプレートにも使えますので、原型として利用できます。

<?php get_header(); ?>
<div id="main">
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
    <?php comments_template(); ?>
</div>
<!--●サイドメニュー●-->

    <?php get_sidebar(); ?>


<?php get_footer(); ?>

Discussion