WP ヘッダー・フッター・管理画面

ヘッダーのカスタマイズ

検索フォーム

検索フォームを設置したい場合は関数get_serch_form()を記述
<?php get_search_form(); ?>

テーマ内にsearchform.phpがあれば、それを読み込み、なければ、WP標準仕様のサイト内検索フォームが表示されます。

自作の検索フォームを読み込む

searchform.phpを作成(基本)

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url(); ?>">
    <div>
        <label class="screen-reader-text" for="s">検索:</label>
        <input type="text" value="<?php the_search_query(); ?>" name="s" id="s">
        <input type="submit" id="searchsubmit" value="検索">
    </div>
</form>

カテゴリによる絞り込み機能をつける

WP関数wp_dropdown_categories()を使うとセレクトボックスによるカテゴリリストが表示される

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url(); ?>">
    <div>
        <label class="screen-reader-text" for="s">検索:</label>
        <?php $argument = array(
            'show_option_none' => 'カテゴリーを選択',
            'orderby' => 'name',
            'hide_empty' => 0
        );
        wp_dropdown_categories($argument);
        ?>
        <input type="text" value="<?php the_search_query(); ?>" name="s" id="s">
        <input type="submit" id="searchsubmit" value="検索">
    </div>
</form>

タグによる絞り込み機能をつける

<?php
$tags = get_tags();
if($tags){ ?>
    <select name="tag" id="tag">
    <option value="" selected="selected">タグを選択</option>
    <?php foreach($tags as $tag){ ?>
        <option value="<?php echo esc_html($tag->slug); ?>"><?php echo esc_html($tag->name); ?></option>
    <?php } ?>
    </select>
<?php } ?>

scss 『セレクタの後に&』で親セレクタを変更

セレクタのクラスが違う時にスタイルを変更したい時は、 scssのネストの外のセレクタを指定した後に、&をつける。

※ネストの中のセレクタを指定すると、ネストの中に入ってしまうので注意!

<!--html-->
<div>
    <p>文字は青色</p>
</div>

<div class="txt_red">
    <p>文字は赤色</p>
</div>

<section>
    <p>文字は緑色</p>
</section>
//scss
p{
    color: blue;
    
    //親セレクタのクラスを指定・変更する(ネストの外のセレクタを指定する)
    .txt_red & {
        color: red;
    }
    
    //親セレクタを指定・変更する(ネストの外のセレクタを指定する)
    section & {
        color: green;
    }
}
//css
p {
color: blue; }

.txt_red p {
color: red; }

section p {
color: green; }

WP 公開URLの変更方法(サブディレクトリにインストールしたWordPressをドメイン直下に持ってきたい)

1.Wordpressダッシュボードの設定

設定 → 一般設定 サイトアドレス(URL)を変更(Wordpressアドレスは変更なし)

2.Wordpressをインストールしたフォルダ直下のindex.phpを編集

修正前: require DIR . '/wp-blog-header.php';

修正後: require DIR . '/wp/wp-blog-header.php'; (/WPをインストールしたフォルダ/wp-blog-header.php)

3.ドメイン直下に編集したindex.phpを移動 または コピーする

※ログインなどする時はWPをインストールしたフォルダのURLからです。 ex: http://sample.com/wp/wp-admin/

jQuery 領域外をクリックしてクラス削除

HTML

<ul class="mainMenu"> 
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ul>

CSS

.mainMenu li.active{
  color: red;
}

JQuery

 $(function(){
 //Mainナビ
   $('.mainMenu li').click(function () {
     $('.mainMenu li').removeClass('active');
     $(this).addClass('active');
   });    
 });

$(document).on('click', function(e) {
  if (!$(e.target).closest('.mainMenu').length) {
    $('.mainMenu li').removeClass('active');
  }
}); 

これはハンバーガーメニューの時などによく使います。

<!-- ハンバーガーメニュー    -->
<div class="ham" id="ham">
  <span></span>
  <span></span>
  <span></span>
</div>      

<div class="header-nav-wrap">      

  <nav id="header-nav" class="header-nav">

    <ul class="header-nav-list">
      <li>about</li>
      <li>contact</li>
    </ul>

  </nav><!--header-nav-->         

</div><!--header-nav-wrap-->
  /* ---------------
   ハンバーガー
  ----------------*/ 
.ham {

  display: block;
  position: fixed;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: solid 1px black;
  z-index: 10;
  margin-right: 20px;
  background: rgba(white,.7);

  span {
    position: absolute;
    left: 9px;
    width: 22px;
    height: 2px;
    background-color: #333333;

    &:first-of-type{
      top: 11px;
      transition: all .3s;
    }
    &:nth-of-type(2){
      top: 18px;
    }
    &:last-of-type{
      top: 25px;
      transition: all .3s;
    }
  }//span 

}//ham
.header-nav{
  display:none;
}//header-nav


/* ハンバーガークリック時 */

.clicked{
  &.ham{
    z-index: 100;
    span{
      &:first-of-type{
        transform: rotate(45deg);
        top: 20px;
      }
      &:nth-of-type(2){
        width: 0px;
      }
      &:last-of-type{
        transform: rotate(-45deg);
        top: 20px;
      }        
    }//span    
  }//clicked.hem
  &.header-nav{ 
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: green;
    padding: 80px 10px;
    max-width: 420px;
    width: 100%;
    z-index: 10;
    overflow: auto;

    .header-nav-list{
      flex-direction: column;
    }//.header-nav-list

  }//clicked.header-nav

}//.clicked    
//ハンバーガーメニュー
 $(function(){
      $('#ham').click(function(){
        $(this).toggleClass('clicked');
        $('#header-nav').toggleClass('clicked');
         
      });     
 });

$(document).on('click', function(e) {
  //globalNavi以外の箇所をクリックしたらclickeクラス削除
  if (!$(e.target).closest('#header-nav').length && !$(e.target).closest('#ham').length) {

    if( $('#ham').hasClass('clicked')){
      $('#ham').removeClass('clicked');
      $('#header-nav').removeClass('clicked');
    } 
  }  

}); 

codepen

See the Pen jQuery 領域外をクリックした時の指定 by seiko-takamori (@seiko-takamori) on CodePen.

https://codepen.io/seiko-takamori/pen/dymvxjM