トランスビット
トランスビットの開発ノート Webサイト制作に役立つTipsやトラブルシューティングなどの備忘録

Event OrganiserのカレンダーウィジェットのタイトルをY年Fにする

Event Organiserのカレンダーウィジェットのタイトル……っていうかキャプションの日付表示が、’F Y’なのを、’Y年F’にする

要は、こういうことです。
widget_calendar

方法:1 直接プラグインをいじる。

編集するファイルは event-organiser/classes/class-eo-calendar-widget.php です。
プラグインアップデートの度に作業が必要な愚策ですが、一応目的は果たせます。

 
// 編集ファイル:event-organiser/classes/class-eo-calendar-widget.php

// $title = sprintf( '<caption> %s </caption>', esc_html( eo_format_datetime( $month, 'F Y' ) ) );
$title = sprintf( '<caption> %s </caption>', esc_html( eo_format_datetime( $month, 'Y年F' ) ) );

方法:2 function.phpでフィルターフックをかける。

やるなら断然こちらですね。
eo_format_datetime関数を調べると、フィルターフックがeventorganiser_format_datetimeということと、その使い方までわかります。
本当、コーデックス様々です。

ちなみに、同じようにしたいと思った人と、それができた人を見つけました。
WordPress プラグイン Event Organiserの日付表示について

上記プラグインにてウィジェットでカレンダーを表示しています。

カレンダーの日付部分が ◯月 2016といった表示になってしまいます。これを 2016 ◯月という風に年・月に表示を変更したいのですがプラグインのファイルを探してみても変更場所がみつかりません。
変更箇所がわかる方、どうかお教えいただけませんでしょうか

(captionの部分です)
—–
回答:こんな感じですかね。

// functions.php
function my_eventorganiser_format_datetime( $formatted_datetime , $format, $datetime ) {
    if ( $format === 'F Y' ) {
        return eo_format_datetime( $datetime, 'Y年 F' );
    } else {
        return $formatted_datetime;
    }
} // 未テスト
add_filter( 'eventorganiser_format_datetime', 'my_eventorganiser_format_datetime', 10, 3 );

残念ながら、質問者さんは実現できなかったようです。
私もやってみたんですが、すぐにはダメでした。後でできました。
というのも、ウィジェットを置きなおしてみたら、それまで効いていなかったフックが効いたんで。

別にオチをつけたかったわけじゃないんですけど……色々やってみるもんですね。

Filed under:

作ったはずのピンがGoogleMapに表示されない件

通常トランスビットでGoogleMapを設置する際には、アナリティクスが使えることもあって、お客様専用Googleアカウントをとった後、APIキー使って設置することが多いです。
今回も、そのAPIキーで設置してるものについてのことです。

scriptでピン(マーカー)をきちんと設定したはずなのに、なぜか表示されない。
オリジナルの画像を使ったわけでもないし、設定はあっているからデフォのピンは読み込まれているはず……cssがコンフリクトしているに違いない!

で、探したらやっぱりコンフリクトしている所がありました。見つかってよかった(=_=;

レスポンシブなサイトの場合、AndroidのデフォルトブラウザとAndroidのchrome、要するにAndroidのために、コンテンツ幅が勝手に縮小されたりフォントサイズが勝手に大きくなったりする現象を抑えるためのcssを書いています。
↓うちではこんな感じ。

p,dt,dd,li,div{
background-image: url('../img/android_bug.png'); // 透過pngで幅対策
max-height: 100%; // フォントサイズ対策
}

この、divについたフォントサイズ対策のmax-heightが犯人でした。
なので、↓のようにmax-heightをなくしてやります。※GoogleMap用のidは適当。

#googlemap{
max-height: none;
}

これで無事、いつもの赤いマーカーが表示されました。
やれやれだぜ。

Filed under:

アンカー付リンクから、スライドトグルさせる

もうちょっとタイトル分かりやすくならんかな、と思ったんですが諦めました。
Q&Aとかでよくある、質問行をクリックすると隠れていた回答ボックスが出てくるトグル関連の話です。
基本、cssは略してます。
↓こういう定義リストをトグルさせるのは簡単。

<dl class="qa">
  <dt>愛媛県の県庁所在地は?</dt>
  <dd>松山市</dd>
  <dt>愛媛県の県の花は?</dt>
  <dd>みかんの花</dd>
  <dt>愛媛県の県の木は?</dt>
  <dd>マツ</dd>
</dl>

<style type="text/css">
  dd{display:none;}
</style>
  $(function(){
    $(".qa dt").on("click", function() {
      $(this).next('dd').slideToggle();
    });
  });

もう一歩進んで、質問へのアンカー付きリンクでページを開いたと同時に、回答部分を表示させる方法。
スムーススクロールさせたいなら、return falseの前に処理を書けばOK。

<dl class="qa">
  <dt id="qa_where">愛媛県の県庁所在地は?</dt>
  <dd>松山市</dd>
  <dt id="qa_flower">愛媛県の県の花は?</dt>
  <dd>みかんの花</dd>
  <dt id="qa_tree">愛媛県の県の木は?</dt>
  <dd>マツ</dd>
</dl>

<style type="text/css">
  dd{display:none;}
</style>
  $(function(){
    // URLのハッシュを取得
    var urlHash = location.hash;
    if(urlHash){
      $(urlHash).next('dd').slideToggle();
      return false;
    }

    $(".qa dt").on("click", function() {
      $(this).next('dd').slideToggle();
    });
  });

ここからさらに進んで、質問部分をタブメニューっぽく横に並べて、スライドトグルするやつ。

<ul class="q">
  <li class="q_where">愛媛県の県庁所在地は?</li>
  <li class="q_flower">愛媛県の県の花は?</li>
  <li class="q_tree">愛媛県の県の木は?</li>
</ul>
<div class="a">
  <div id="qa_where"><p>松山市</p><p class="close">×</p></div>
  <div id="qa_flower"><p>みかんの花</p><p class="close">×</p></div>
  <div id="qa_tree"><p>マツ</p><p class="close">×</p></div>
</div>

<style type="text/css">
  .q li{
    float:left;
    width:200px;
    border:1px solid #ccc;
  }
  .a div{display:none;}
</style>
  $(function(){
    // アンカーリンクからスライドトグル。ついでにスムーススクロール  ---------
    // URLのハッシュを取得。
    var urlHash = location.hash;
    if(urlHash){
      $(urlHash).slideToggle();
      var href= urlHash;
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, 1000, 'swing');
      return false;
    }

    $(".qa dt").on("click", function() {
      $(this).next('dd').slideToggle();
    });

    // 閉じるボタン  ----------------------------
    $(".close").on("click", function() {
      $(this).parent().slideToggle();
    });

    // メニューからスライドトグル  ---------------
    $(".q li").on("click", function() {
      // メニューのclassを取得し、余分をとる
      var q = $(this).attr("class").replace(/q_/g,'');

      // div総当たり
      $(".a div").each(function(i) {
        // divのidを取得し、余分をとる
        var qa = $(this).attr("id").replace(/qa_/g,'');
        // メニューとmatchしたらトグル
        if (qa .match(q)) {
            $(this).slideToggle();
        }else{
            $(this).hide();
        }
      });
    });
  });

別にタブでいいんじゃない?と思うでしょうが、色々理由があって画面稼ぎしないといけない、そんなニッチな仕様の時にどうぞww

Filed under:

見出しタグと同じテキストをtitleタグに設定

ちょっとだけ題名を変えて、前回結論が出たやつを書いてみました。
やりたいことは↓です。

  1. headerやfooterはincludeして使いまわすため、header内のtitleタグを各ページに合わせて変化させたい。
  2. urlに対応するページタイトルを設定しておき、titleタグに書き加える。
function get_pagetitle(){

// 現在のurlを取得
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$domain = 'http://●●●●●/';
$pagetitle; // 入れ物

// 配列に、urlとページタイトルを入れておく
$pages = array (
  array ( 'href' => $domain.'cat.php', 'text' => '猫派' ),
  array ( 'href' => $domain.'dog.php', 'text' => '犬派' ),
  array ( 'href' => $domain.'bird.php', 'text' => '鳥派' )
);

// 配列の中で、現在のurlと対応するものを判別、その後、textを取得。
foreach($pages as $page){
  if($page['href'] == $url){
    $pagetitle = $page['text'];
  }
}
return $pagetitle;
}

これで、ページタイトルをゲットできるようになりました。
せっかくの配列なので、引数を設定したらfooter用のナビゲーションを書き出せるようにしてもいいかもです。

Filed under: ,

見出しタグ内のテキストをtitleタグに設定

やりたいことは至って単純なんです。

  1. headerやfooterはincludeして使いまわすため、header内のtitleタグを各ページに合わせて変化させたい。
  2. 各ページには、見出しタグh2でページタイトルがついている。
  3. だから、それを取ってきてtitleタグに自動で書き加えたら楽な気がする!

jQueryなら簡単なんですが、titleをDOMで出すのは流石に良心が痛むので(SEO的に)、phpでやることにしてググってみました。

↓↓ 辿り着いたありがたいサイトを参考にしてみました。
PHPでWEBページのタイトルを抜き出すサンプル

function get_pagetitle(){
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; //当該ページ
$html = file_get_contents($url); //HTML取得
// ↓マルチバイトencode。今回はもとからutf-8なので不要。
// $html = mb_convert_encoding($html, mb_internal_encoding(), "auto" ); 
if ( preg_match( "/<h2 class=\"page_title\">(.*?)<\/h2>/i", $html, $matches) ) {
    $pagetitle = $matches[1]; //h2を丸ごと取得
} else {
    return false;
}

return strip_tags($pagetitle); //タグを除いて、中身だけ返す
}

できたー!
できた……が、file_get_contentsを使わずに、現在のページを舐めることはできないの!?
そして、わかっていたけどpreg_matchの重さは異常!!
たった一つのタグを探し出すための仕掛けなのに……(TT

結論:ファイル名とタイトルの連想配列を作っといて、foreachするのが一番良いと思います。

Filed under: ,