やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

めちゃよく使う、スマホ用ドロップダウンメニュー

WordPress メモ
  • MENUを押すと、にゅーんと伸びる
  • MENUの横のキャレットが上向きになる
  • スクロールすると、上部に張り付く

html

<ul class="sp" id="spMenu">
  <li class="spMenuBtn">MENU<b class="caret"></b></li>
	<ul>
		<li><a href="<?php echo esc_url( home_url() ); ?>">HOME</a></li>
		<li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>">ABOUT</a></li>
		<li><a href="<?php echo esc_url( home_url( '/gallery' ) ); ?>">GALLERY</a></li>
		<li><a href="<?php echo esc_url( home_url( '/blog' ) ); ?>">BLOG</a></li>
		<li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>">CONTACT</a></li>
	</ul>
</ul>

CSS

#spMenu{
  text-align:center;
  width:100%;
}
#spMenu li{
  padding:12px 0;
}
#spMenu ul{
	display:none;
}
.caret {
border-top:   solid 4px #000;
border-left:  solid 4px transparent;
border-right: solid 4px transparent;
border-bottom: solid 4px transparent;
vertical-align: bottom;
margin-left:10px;
line-height:0.3;
}
.spMenuActive .caret{
border-bottom:   solid 4px #000;  
border-top:solid 4px transparent;
border-left:  solid 4px transparent;
border-right: solid 4px transparent; 
vertical-align: top;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index : 9999;
}

jQuery

jQuery(function($){
      $("#spMenu > li").on("click", function() {
          $(this).toggleClass("spMenuActive");
          $(this).next().slideToggle();
      });
  });

jQuery(function($) {
    var spMenu = $('#spMenu');
    var spMenuTop = spMenu.offset().top;
    $(window).scroll(function () {
        var winTop = $(this).scrollTop();
        if (winTop >= spMenuTop) {
            spMenu.addClass('fixed')
        } else if (winTop <= spMenuTop) {
            spMenu.removeClass('fixed')
        }
    });
});
  • WordPressでjQueryの時、$(function(){ がだめなのを毎回忘れるよね。

【2020更新】よく使う、WordPressのOGP設定

WordPress

2020バージョン。
画像の設定は下の方でまとめてやっている。
（画像パスは/img/ogp.png）

※未解決
これだとアーカイヴページのURLが出せない。
ページ数が多く無いので、今のところ個別に出し分けているが…

<!--==============ogp===============-->
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php
////////////投稿
if (is_single()){ 
  if(have_posts()): while(have_posts()): the_post();
    echo '<meta property="og:type" content="article">';echo "\n";
    echo '<meta property="og:description" content="'; echo mb_substr(get_the_excerpt(), 0, 100) ; echo '…">'; echo "\n";
  endwhile; endif;
  echo '<title>'; the_title(); echo ' | '; bloginfo('name'); echo '</title>'; echo "\n";
  echo '<meta property="og:title" content="'; the_title(); echo ' | '; bloginfo('name'); echo '">'; echo "\n";
  echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
} 
///////////固定ページ
elseif (is_page()) { 
  if(have_posts()): while(have_posts()): the_post();
  echo '<meta property="og:type" content="website">';echo "\n";
  echo '<meta property="og:description" content="'; bloginfo('description'); echo ' | '; the_title(); echo 'のページ">'; echo "\n";
  endwhile; endif;
  echo '<title>'; the_title(); echo ' | '; bloginfo('name'); echo '</title>'; echo "\n";
  echo '<meta property="og:title" content="'; the_title(); echo ' | '; bloginfo('name'); echo '">'; echo "\n";
  echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
}
///////////アーカイヴページ
elseif (is_archive()) {
  echo '<meta property="og:type" content="website">';echo "\n";
  echo '<meta property="og:description" content="'; bloginfo('description'); echo ' | '; the_archive_title(); echo 'のページ">'; echo "\n";
  echo '<title>'; the_archive_title(); echo ' | '; bloginfo('name'); echo '</title>'; echo "\n";
  echo '<meta property="og:title" content="'; the_archive_title(); echo ' | '; bloginfo('name'); echo '">'; echo "\n";
  echo '<meta property="og:url" content="'; echo esc_url( home_url() ); echo '">';echo "\n"; //未解決。the_permalink();だとページ内の投稿のURLが出てしまう。
}else{ 
///////////それ以外
  echo '<title>'; bloginfo('name'); echo '</title>';echo "\n";
  echo '<meta property="og:type" content="website">';echo "\n";
  echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";
  echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";
  echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";
}
/////////// 画像
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if (is_single()){ //投稿
  if (has_post_thumbnail()){
  $image_id = get_post_thumbnail_id();
  $image = wp_get_attachment_image_src( $image_id, 'full');
  echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
  } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
  echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
  } else {
  echo '<meta property="og:image" content="';echo esc_url( home_url() ); echo '/img/ogp.png">';echo "\n";
  }
} else { //それ以外
echo '<meta property="og:image" content="'; echo esc_url( home_url() ); echo '/img/ogp.png">';echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:admins" content="======ID=====">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="======@ID=====" />
<link rel=”canonical” href=”<?php echo esc_url( home_url() ); ?>”/>

<!--==============/ogp===============-->

アーカイヴページのタイトル

勝手に「タグ：」「カテゴリー：」とかが入る。
しかも最近のアプデでspanタグまで付くようになってしまったので、
functions.phpに下記を追加

<?php
add_filter( 'get_the_archive_title', function ($title) {
    if ( is_archive() ) {       
            $title = post_type_archive_title( '', false );   
        } elseif (  is_category() ) {
            $title = single_cat_title( '', false );
        } elseif ( is_tag() ) {
            $title = single_tag_title( '', false );
        } elseif ( is_author() ) {
            $title = get_the_author();
        }
    return $title;
});
?>

参考
shintaro-kawase.hatenablog.com

もうやだパーマリンク

WordPress

SSLにしたあと、うまくいかないことばかり

まずsingle.phpが読み込まれない

これはSSLとは関係なく、/%year%/%month%/%date%/が原因だったので

idベースにしたら治りました

「続きを読む」のリンクがおかしい

https://xxxx.com/"https://xxxx.com/archives/123"

みたいなリンクが貼られてしまう

つまりget_permalink()の挙動がおかしい

解決
<a href="<?php echo get_permalink(); ?>">
<a href=”<?php echo get_permalink(); ?>”>

この違いわかる・・・？

（※ダブルクォーテーション）

馬鹿みたいにコピペしてくるからこういうことになる



S S L ひ と つ も 関 係 な か っ た