wordpressのheader.phpに入れる「meta property ogp」

Filed under: php,wordpress — kdcs @ 2018年3月9日 金曜日

meta propertyはsns用の記述
※特に記事ごとにタイトルやディスクリプション、画像を個別に設定すると効果的なので
条件分岐(is_single)で対応。
また、アイキャッチ画像があれば取得し、無ければ記事内の画像を取得する
まったく画像が無ければデフォルトで用意した画像(sns_image.jpg)を取得する。

2022.4.21追記
17行目がエラーになるので修正
こちらが修正版

$str = isset($post->post_content);

こちらも使える”??” 演算子 (null 合体演算子)

$str = $post->post_content ?? 'none';
<meta property='og:locale' content='ja_JP'>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
if (is_single()){
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 120).'">';echo "\n";
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
echo '<meta property="og:type" content="article">';echo "\n";
endwhile; endif;
} else {
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";
echo '<meta property="og:type" content="website">';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 )){
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {
echo '<meta property="og:image" content="'; bloginfo('template_url'); echo '/images/sns_image.jpg'; echo '">';echo "\n";
}
} else {
echo '<meta property="og:image" content="'; bloginfo('template_url'); echo '/images/sns_image.jpg'; echo '">';echo "\n";
}
?>
<meta name="twitter:card" content="summary_large_image">

googleカレンダーをレスポンシブ対応にする

Filed under: css,レスポンシブデザイン — kdcs @ 2018年3月2日 金曜日

ネット上にあるレスポンシブ化の手順ではiPhoneでカレンダーを表示させた場合、
縦表示では「はみ出る」横にすると「カレンダーが伸び始める」
という訳で色々探した結果、iPhoneにも対応する手法が見つかったのでメモ

スマホのように横幅が狭い画面ではカレンダーの余計なタブ(印刷・週・月・予定リスト)を非表示にする
以下はPC用とモバイル用で切り替える記述
※googleカレンダーから取得するコード「width」の部分を100%に変更する
html

<div class="cal_wrapper">
<div class="googlecal googlecal-4x3">
<iframe class="pc_block" src="https://www.google.com/calendar/embed?height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " width="100%" height="400" frameborder="0" scrolling="no"></iframe>
<iframe class="sp_block" src="https://www.google.com/calendar/embed?showPrint=0&amp;showTabs=0&amp;showTz=0&amp;showCalendars=0&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " width="100%" height="400" frameborder="0" scrolling="no"></iframe>
</div><!--/.googlecal-->
</div><!--/.cal_wrapper-->

css

.cal_wrapper {
  max-width: 800px; /* 最大幅 */
  min-width: 300px; /* 最小幅 */
}
.googlecal {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
}
 .googlecal iframe,
.googlecal object,
.googlecal embed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border: 0;
}
.googlecal-4x3 {
  padding-bottom: 30em;
}

※iframe内のstyleからwidthとheightを外した場合の記述(こちらを採用)
html

<div class="cal_wrapper">
<div class="googlecal googlecal-4x3">
<iframe class="pc_block" src="https://www.google.com/calendar/embed?height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " frameborder="0" scrolling="no"></iframe>
<iframe class="sp_block" src="https://www.google.com/calendar/embed?showPrint=0&amp;showTabs=0&amp;showTz=0&amp;showCalendars=0&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " frameborder="0" scrolling="no"></iframe>
</div><!--/.googlecal-->
</div><!--/.cal_wrapper-->

css(css内.googlecal iframeにwidthとheightを追加する)

.cal_wrapper {
  max-width: 800px; /* 最大幅 */
  min-width: 300px; /* 最小幅 */
}
.googlecal {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
}
 .googlecal iframe,
.googlecal object,
.googlecal embed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 400px;
}
.googlecal-4x3 {
  padding-bottom: 30em;
}

スマホでカレンダーを表示し、予定をタップするとポップアップウインドウが現れるが、横幅が400pxに指定されているためスマホ縦画面で見た場合に横にはみ出てしまう。
カレンダーのデザインをカスタマイズできる「gcalendar-wrapper.php」を使うとcssで横幅をカスタマイズできる。

htmlのカレンダー埋め込みコードを書き換える
ダウンロードしたgcalendar-wrapper.phpのcss記述部分に以下を追加

div.bubble { max-width:100% !important; }

gcalendar-wrapper.phpをthemesフォルダ内にアップロード

「src=”https://calender.google.com/calendar/embed?」 の部分を
「アップロードした場所へのパス/gcalendar-wrapper.php?」 に書き換える

スクロールしてもグローバルナビを上部で固定する(レスポンシブ)

Filed under: css,JavaScript,レスポンシブデザイン — kdcs @ 2018年2月9日 金曜日

スクロールしてもグローバルナビを上部で固定する(jQuery使用)
pcで表示の場合のみ固定し、モバイル表示の時はslicknavを表示する

ページhtml
※ナビ固定分の縦幅の起点のため空のdivタグ#navFixedを入れる
モバイル表示の際は、このdivタグは非表示処理(display: none;)する

<div id="nav">
ナビ記述・・・
</div><!--/#nav-->

<div id="navFixed"></div>
<div id="main">
メインコンテンツ・・・
</div><!--/#main-->

css

#nav { text-align: center; background: #2f62c5; }
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

/* スマホ対応
---------------------------------------------*/
@media only screen and (max-width: 780px) {
#nav {
  display: none;
  }
div#navFixed { display: none; }
}

javascript

//ナビ スクロール固定 --------------------------------------
$(function() {
  var $win = $(window),
      $main = $('#navFixed'),
      $nav = $('#nav'),
      navHeight = $nav.outerHeight(),
      navPos = $nav.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
      $main.css('margin-top', navHeight);
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});

WordPress 404ページ

Filed under: wordpress — kdcs @ 2018年1月16日 火曜日

WordPress では該当するページがない場合、優先的に index.php が表示されるようになっているので

<?php get_header(); ?>
<div id="content">
<h2>指定されたページは存在しませんでした。</h2>
<p>このページの URL :
<span class="error_msg">
http://<?php echo esc_html($_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']); ?>
</span></p>
<p>現在表示する記事がありません。</p>
<p><a href="<?php echo home_url(); ?>">トップページへ戻る</a></p> 
</div>
<?php get_footer(); ?>

エラーメッセージを出し、表示中のページの URL を「echo esc_html($_SERVER[‘SERVER_NAME’].$_SERVER[‘REQUEST_URI’]);」で出力。最下部にトップページへ戻るリンクを出力

エラーが出ても 404.php でページが生成されない場合があるので、.htaccess に「ErrorDocument 404 /index.php?error=404」という設定を追加する。
※WordPress をサブディレクトリにインストールしている場合は、「ErrorDocument 404 /サブディレクトリ名/index.php?error=404」という形で指定する必要がある。
.htaccessファイル

# BEGIN WordPress
・・・省略・・・
# END WordPress
ErrorDocument 404 /index.php?error=404

WordPress 4.4以降の自動生成レスポンシブ用画像とsrcset挿入を停止

Filed under: functions.php,wordpress — kdcs @ 2018年1月15日 月曜日

WordPress 4.4以降の機能としてレスポンシブ用の画像(幅768px固定)が勝手に生成され
imgタグに「srcset」が自動的に追加される。

これを停止させる方法

画像の生成を停止
function.phpに以下を記述し、WordPressを1度リロードさせる

// レスポンシブイメージ自動生成の無効化(WordPress4.4以降)-------------------------------
update_option( 'medium_large_size_w', 0 );

その後この記述は削除してもかまわない

imgタグに入るsrcの自動挿入を停止

// レスポンシブイメージsrcset挿入の無効化(WordPress4.4以降)-----------------------------
add_filter( 'wp_calculate_image_srcset', '__return_false' );

サイト内検索

カテゴリー

最近の投稿

↑上に戻る