WordPressテーマXeory Extensionで同名のid属性が出力されるのを修整する

Xeory Extensionは日本語のレイアウトが非常に美しく、とても気に入っているテーマのひとつです。

JavaScriptでid属性の値を指定するカスタマイズをしている時に気が付いたのですが、以下のようなバグがあったので修正しました。

この記事に書かれていること

トップページに同じid属性の値を持つ要素が複数存在してしまう

トップページ表示用のfront-page.phpが、同じid属性の値（id=”front-contents-1″とid=”front-service-1″をそれぞれ複数）を持つ要素を出力してしまっていました。

「会社概要」と「お問い合わせ」部分の修正

「会社概要」部分は以下のように修正します。

front-page.php 修正前

<section id="front-contents-1" class="c_box c_box_left <?php echo $company_map_class; ?>">

front-page.php 修正後

<section id="front-company-0" class="c_box c_box_left <?php echo $company_map_class; ?>">

会社概要は登録が2つ以上になることはないはずなので”front-company“としたいところですが、”front-company“というid属性の値は既に使用されているので使えません。
また”front-company-1“も使われていますので”front-company-0“としました。

ソースコードにこだわるのであれば”front-company“が使われている部分を”front-company-wrap”等にして、今回修正した部分を”front-company“にするのが良いと思います。
その際は既存の”front-company“がスタイルシートに多用されていますので、そちらの修正も必要になります。
（他にJavaScript等からのid参照はありませんでした。）

私はなるべく元のソースコードを書き換えたくないので素直に”front-company-0“にしました。

「お問い合わせ」部分は以下のように修正します。

front-page.php 修正前

<section id="front-contents-1" class="c_box c_box_left">

front-page.php 修正後

<section id="front-contact-0" class="c_box c_box_left">

こちらも”front-contact“というid属性の値は使われてしまっています。
上述したように、会社概要に合わせて”front-contact-0“とすることで少しでも可読性を良くしてみました。

「クローズアップ」と「サービス紹介」部分の修正

こちらは管理画面から複数登録した場合に、それぞれのセクションが表示されるためループ構造になっています。

「クローズアップ」部分は以下のように修正します。

front-page.php 修正前

<section id="front-contents-1" class="c_box c_box_<?php echo $left_right;?>">

front-page.php 修正後

<section id="front-contents-<?php echo $i; ?>" class="c_box c_box_<?php echo $left_right;?>">

「サービス紹介」部分は以下のように修正します。

front-page.php 修正前

<section id="front-service-1" class="c_box">

front-page.php 修正後

<section id="front-service-<?php echo $i; ?>" class="c_box">

さらに修正が必要な個所

ループの前で変数$i=1が定義されていますが実際には使われておらず、インクリメント（プラス1）すらされませんので、ループ内の最後で$iに1を加えます。

サービス紹介部分のみ以下に全文を記載します。
最後のコメントアウト部分も一応変更してあります。

<!-- サービス紹介 -->
<?php
  $icon = 'none';
  $title = '';
  $ruby = '';
  $bzb_ruby = '';
  $bzb_catch = '';
  $bzb_service_header_array = get_option('bzb_service_header');
  if(is_array($bzb_service_header_array)){
    extract($bzb_service_header_array) ;
  }

?>
<div id="front-service" class="front-main-cont">

  <header class="category_title main_title front-cont-header">
    <div class="cont-icon"><i class="<?php echo $icon;?>"></i></div>
    <h2 class="cont-title"><?php echo $title;?></h2>
    <p class="cont-ruby"><?php echo $ruby;?></p>
    <div class="tri-border"><span></span></div>
  </header>


  <div class="wrap">
    <div class="front-service-inner">

<?php
  $i = 1;
  $bzb_service = get_option('bzb_service');
  if(isset($bzb_service)){
  foreach((array)$bzb_service as $key => $value){
    extract(make_info_4top($value));
?>
      <section id="front-service-<?php echo $i; ?>" class="c_box">
        <div class="c_title">
          <h3><?php echo $title;?></h3>
          <p class="c_english"><?php echo $bzb_ruby;?></p>
        </div>
        <div class="c_text">
          <h4><?php echo nl2br($bzb_catch);?></h4>
          <p><?php echo $service;?></p>
          <?php if(isset($button_text) && $button_text !== '') { ?>
            <p class="c_btn"><a href="<?php echo $button_url;?>" class="btn"><?php echo $button_text;?></a></p>
          <?php }else{ ?>
            <p class="c_btn"><a href="<?php echo $url;?>" class="btn">詳しく見る</a></p>
          <?php } ?>
        </div>
      </section>
  <?php
  $i++;
    }
  }
  ?>    
    </div>
  </div>

</div><!-- /front-service -->

これでW3CのHTMLチェックでエラーとなっていた部分が改善されました。
JavaScriptで該当部分のDOM操作をする場合には、上記の修正をしないとエラーで悩む事になってしまいます。