スマホサイトでヘッダー固定の時にページ内リンクの座標がずれてしまう件

とっても久しぶりの投稿になってしまいました。ドイです。

春からお仕事関連のお声掛けが多く、ありがたいことに久々モリモリお仕事させて頂きました。

2015年4月のgoogleの「スマートフォン利用に最適化されたサイトが「モバイルでの」検索結果で優遇されやすくなるように変更する」という件により、たくさんの【スマホ案件】の対応をしてきました。
もちろんレスポンシブデザインにすることもありだと思いますが、設計・構成から見直す必要がある場合もあります。

低予算・短期納品に対応するケースでしたので、「スマートフォン最適化」としてPC版の既存サイトについてスマホ用のサイトを新規制作することになりました。

全ての案件・・・というわけではありませんでしたが、
よくあるのが『ヘッダー部分はスクロールすると上部に固定される』というパターン。
このケースでは、ページ内リンクや他のページ内リンクに移動したときに、
固定ヘッダーの高さ分だけ、座標がずれてしまいこちらの思惑通りにいかないことがあります。

今回は備忘録もかねて、
スマホサイトでヘッダー固定の時にページ内リンクの座標がずれてしまう件の対処方法 をメモ。

■例:ヘッダー固定の高さが80pxの場合、「ページトップへ戻る」と「別ページ”パーティー”コース紹介」に飛ぶ場合

/* ページ内リンク  ------------------------------------------*/	
#top {
  margin-top: -80px!important; /* 固定ナビの高さ分のネガティブマージン */
  padding-top: 80px!important; /* 打ち消し用のパディング */
  display: inline-block; /* webkitブラウザーのために必須 */
  vertical-align: top;
}

#party {
  margin-top: -80px!important; /* 固定ナビの高さ分のネガティブマージン */
  padding-top: 80px!important; /* 打ち消し用のパディング */
  display: inline-block; /* webkitブラウザーのために必須 */
  vertical-align: top;
}

CSSのネガティブマージンを利用するやり方なので、jQueryなどスクリプトを使わなくても対応可能です!
スマートフォン専用サイトを制作していてドツボにはまった私はこれで解決してみました。



SimpleeWPにて新しいオリジナルテーマ「cafebar」を公開しました

弊社サービス「SimpleeWP」では、カスタマイズベースにしやすいWordPressのオリジナルテーマを販売しています。

この度、カフェなど飲食店向けのテーマ第二弾「SimpleeWP CafeBar」を公開しました。
「お知らせ」とは別に、飲食店に必要な「ショップメニュー」を独立したカスタム投稿として設定しています。
メニュー更新の管理は、通常の投稿と分けて管理することが可能です。

PC、タブレット、スマートフォンなど使用するデバイスにあわせて自動最適化されるレスポンシブデザインに対応したシンプルなWordPressテーマです。

ぜひ一度ご覧下さい。

●紹介ページ  http://simpleewp.com/theme/simpleewp_cafebar/
●デモページ  http://simpleewp.com/cafebar/



【WordPress】アーカイブページで該当するカテゴリーをタイトル表示させる件

今回はタイトルの説明が変かもしれませんが。
WordPressのクライアント様案件で、テンプレートを微調整している真っ最中のドイです。

今回の件は、
1.大カテゴリー別にカスタム投稿を採用。
2.多言語サイト(日本語、英語)
3.各カテゴリーの子カテゴリーをアーカイブページとして一覧表示させる
4.表示されている「子カテゴリー名」をページタイトルとして表示させたい。

という感じです。
最初は以下テンプレートタグを使用していました。

<?php echo $title ?>

ところが、これでは「大カテゴリー(カスタム投稿名)」の表示にしかならないのです。

たとえば「お知らせ」に「プレスリリース」「イベント情報」「出版物」とあったとしても、どのアーカイブページも「お知らせ」というタイトルになってしまいます。

これではユーザーに「どのページの一覧を見ているのか?」が分かりにくいため、テンプレートタグを変更しました。
■テンプレートタグ/single cat title■
これは【カテゴリーまたはタグアーカイブがクエリされているときに使用すると、ページタイトル(カテゴリー名またはタグ名)を表示または返します(※WordPress  Codexより)】とのことですので、この関数が使用できるのはループの外だけになります。

■使い方

<?php single_cat_title( $prefix, $display ); ?>

■パラメータの説明
============================
$prefix(文字列:オプションなのでなしでもOK)・・・タイトルの前に出力したいテキスト
$display(真偽値:オプション) ページタイトルを表示するか(true)、それとも PHP で使えるように返すか(false)。
============================

■基本的な使用例

<h2><?php single_cat_title( '', true ); ?></h2>

以上。
アーカイブテンプレートの記述を修正したら、無事に各カスタム投稿の子カテゴリーが表示されるようになりました。



[WordPress] is_dynamic_sidebar() とis_active_sidebar() ではまった件

夏休みも終わり(一応営業的には・・・ですが)今年はそこそこ日焼けしてきました!

今年の夏は、夏期休暇中もなんだかんだでWordPressと格闘しています。

オリジナルテーマにウィジェット機能を追加して、「ウィジェットに登録されている時は表示」「何も登録されていない時はブロックごと非表示」という箇所を最大で1ページ内に3か所設置するのが目標。

最初は、1か所だけだったので

<?php if ( is_dynamic_sidebar() ) : ?>
<!-- ウィジェットがある場合 -->
<div class="box">
<div class="box-content">
<?php dynamic_sidebar(); ?>
</div>
</div>
<?php else: ?>
<!-- ウィジェットがなかった場合 -->
<?php endif; // end sidebar widget area ?>

こんな感じで問題なかったのですが、複数設置テストしてみたところ、
is_dynamic_sidebar() だと登録されていなくてもブロック要素は表示されてしまうんですね。

あれこれパターンを変えて検証した結果、

<?php if(is_active_sidebar('sidebar-1')) : ?>
<!-- ウィジェットがある場合 -->
<div class="box">
<div class="box-content">
<?php dynamic_sidebar('sidebar-1'); ?>
</div>
</div>
<?php else: ?>
<!-- ウィジェットがなかった場合 -->
<?php endif; // end sidebar widget area ?>

と、
is_dynamic_sidebar()

指定したダイナミックサイドバーが使用中かどうか。
ではなく、
is_active_sidebar()

指定したダイナミックサイドバーが有効かどうか。

を指定すると、表示・非表示の制御が可能になりました。

この案件ではなるべくクライアント様の作業が簡単にできるよう設定していく事が目標なので、ウィジェットに何か登録したときだけ自動的に表示させたかったのです。
しかもレスポンシブ×多言語サイト-_-;

一応形だけは整ったけれど、文字数の制御まではしていないので、
PC、タブレット、スマートフォン・・・とサイズに合わせて設定の微調整が必要。
うーん。。。まだ先は長いかも?

今回はここ数日はまった件についてでした^^;



【WordPress】特定のカテゴリーの最新記事リストをウィジェットエリアに追加する方法

タイトルが長すぎですが^^;

WordPress案件などでよく出てくるのが「特定のカテゴリーの記事だけサイドバーに表示させたい」というご要望です。

もちろん、サイドバーやトップページなど、テンプレート内に直接記述することは可能ですが、
今回はウィジェットとして追加作成してしまおうという話です。

メリットとしては、利用するテーマ内のウィジェットエリアがいくつかある場合、
自分で好きな場所に設定することが可能ということ。

/*---------------------------------------------------------------------------------*/
/* 特定カテゴリの最新の投稿タイトル一覧用サイドバーウィジェット */ ※当方がカスタマイズしているものです
/*---------------------------------------------------------------------------------*/
// WP_Widget クラスを継承するサブクラスとして定義
class My_RecentPosts_Widget extends WP_Widget {
    // コンストラクタ
    function My_RecentPosts_Widget() {
        // ウィジェットの初期設定
        $widget_opts = array('classname' => 'my_recent_posts_widget', 'description' => '特定カテゴリの最新の投稿タイトル一覧を表示。カテゴリーIDを指定してください。' );
        $control_opts = array('width' => 200, 'height' => 300);
        $this->WP_Widget('MyRecentPostsWidget', '特定のカテゴリー最近の投稿', $widget_opts, $control_opts);
    }
    // 管理画面にフォームを表示する処理
    // $instance : 保存されているオプション値の連想配列
    function form($instance) {
        // 設定が保存されていない場合はデフォルト値を設定
        $instance = wp_parse_args((array)$instance, array('title' => 'Recent Posts', 'number' => 5, 'category' => 1));
        // それぞれの設定値を取得
        $title = strip_tags($instance['title']);    // タイトル
        $number = $instance['number'];              // 表示する投稿数
        $category = $instance['category'];          // カテゴリID
        // フォーム用の name 属性および id 属性の値を取得
        $titlename = $this->get_field_name('title');
        $titleid = $this->get_field_id('title');
        $numbername = $this->get_field_name('number');
        $numberid = $this->get_field_id('number');
        $categoryname = $this->get_field_name('category');
        $categoryid = $this->get_field_id('category');
        // フォームの出力
        echo '<p><label for="'.$titleid.'">タイトル:</label><br />';
        echo '<input type="text" name="'.$titlename.'" id="'.$titleid.'" value="'.$title.'" style="width:100%;" /></p>';
        echo '<p><label for="'.$numberid.'">表示する投稿数:</label>';
        echo '<input type="text" name="'.$numbername.'" id="'.$numberid.'" value="'.$number.'" style="width:60px;" /></p>';
        echo '<p><label for="'.$categoryid.'">カテゴリーID:</label>';
        echo '<input type="text" name="'.$categoryname.'" id="'.$categoryid.'" value="'.$category.'" style="width:60px;" /></p>';
    }
    // 管理画面でオプションを保存する処理
    // $new_instance : 入力されたオプション値の連想配列
    // $old_instance : 保存されているオプション値の連想配列
    // 戻り値 : 新たに保存されたオプション値の連想配列
    function update($new_instance, $old_instance) {
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['number'] = $new_instance['number'];
        $instance['category'] = $new_instance['category'];
        // 例えばエラーチェックしたい場合は以下のような感じで
        if (!$instance['title']) {
            // タイトルが空白の場合、元の値に戻してエラー表示
            $instance['title'] = strip_tags($old_instance['title']);
            $this->m_error = '<span style="color:#ff0000;">タイトルが空白です。元の値に戻します。</span>';
        }
        return $instance;
    }
    // サイトで表示する処理
    // $args : 出力用文字列の連想配列
    // $instance : 保存されているオプション値の連想配列
    function widget($args, $instance) {
        extract($args);
        $instance = wp_parse_args((array)$instance, array('title' => '', 'number' => 5, 'category' => 1));
        // タイトルはフィルタ処理
        $title = $instance['title'];
        $title = apply_filters('widget_title', $title);
        $number = $instance['number'];
        $category = $instance['category'];
        echo $before_widget."n";
        echo $before_title.$title.$after_title."n";
        echo '<ul class="recentEntries">';
        // 最新の投稿タイトルを件数とカテゴリを指定して取得&出力
        query_posts('&showposts='.$number.'&cat='.$category);
        if (have_posts()) {
            while (have_posts()) {
                the_post();
                echo '<li><a href="'.get_permalink().'">'.the_title('', '', false).'</a></li>';
            }
        }
        echo '</ul>';
        echo $after_widget."n";
        // WordPress のループ用クエリをリセット
        wp_reset_query();
    }
}
// ウィジェットを widgets_init フックで登録
add_action('widgets_init', create_function('', 'return register_widget("My_RecentPosts_Widget");'));

メリットとしては、利用するテーマ内のウィジェットエリアがいくつかある場合、
自分で好きな場所に設定することが可能ということ。
上記のタグをfunction.phpに追記すると、オリジナルウィジェットが追加されます。

●カテゴリーの指定
●投稿数の指定

が可能です。(おそらく)コピペでいける(…はずです)ので、一度お試しくださいませ!!



【SimpleeWP】オリジナルテーマ販売サイトを公開しました

前回はオリンピックで寝不足・・・と書いていましたが、今回はサッカーワールドカップで毎日寝不足-_-;;; のドイです。
ようやくベスト16が出揃って、少し寝られるかなぁ。

さてさて、本業をこなしつつ(といっても本年度はやや縮小気味ですが)
ずっと準備してきた「WordPressオリジナルテーマ販売サイト」を6月中旬からひっそりと新規公開しています。

SinpleeWP:シンプルそして簡単にカスタマイズするためのベーステーマです。
実は、あまり作りこみすぎてはいません。
デザイン的なところは使い手がCSSでどんどん変えてください。
基本動作やあったら嬉しいカスタマイズ要素の準備まではしてあります。
トップページにスライダーを入れるためには特別に【有料プラグイン】をセット販売しています。

もちろんお気に入りの優秀な無料プラグインを利用していただいても構いません。
でも有料プラグインは無料プラグインより細かい設定が簡単にできます。
自分でガッツリ設定する時間を大幅に短縮できるので、ちょっとおススメです。

一度、のぞいてみてください。よろしくお願いします。
SimpleeWP_theme01_Responsive-showcase-presentation_03



WordPressでショートコードをphpテンプレート内に設置する

なんだかまたまた投稿があいてしまいました-_-; ドイです。

あっという間にもうすぐ三月です。
確定申告の準備もしなければ…と思いつつ、毎日深夜までオリンピックを見ながらWPの勉強ばかりしています。

さて、今日は忘備録として【WordPressのPHPテンプレート内にショートコードを入れたい時】です。

WordPressにはとても便利なプラグインがたくさんあります。
設定が済んだらあとはショートコードを設置したい場所に書くだけ。。。なんですが、
利用できるのは「投稿」「固定」ページの中になります。

テーマファイルの中、たとえば『index.php』や『single.php』など、個別に
ショートコードを直接挿入したいなーということが、
クライアントワークでは往々にしてあります。その場合は、「do_shortcode()」を使用します。

■ 通常の場合
<?php do_shortcode( ‘[ショートコード]’ ); ?>

■ 何かを出力する場合
<?php echo do_shortcode( ‘[ショートコード]’ ); ?>

※”<”は全角で記載しています。

これでプラグインをサイドバーやフッターに簡単に設置することができそうです。
とりあえず、まずはトップページでスライダーを設置してみようと思います。



【Startup Design Framework】新規案件のスタートアップHTML/CSS/JSをまとめたフレームワーク

Startup Framework

1ページで完結したスタートアップ用Webサイトのフレームワーク一式で気になるものがあったので紹介します。
DEMO版(無料)有料版がありますが、共に内容は、1ページで構成されたさまざまなレイアウト、コンポーネントが用意されたPSDから、HTML/CSS(LESSも)/JavaScriptまでセットになっています。

無料版ではサンプルサイトは2パターン、そして有料版は25パターンもあります。

Bootstrapをベースにした同社製の【Flat UI】などがベースになっています。
フォルダは「Developer」にHTML/CSS/LESS/Javascriptなどが納められています。「Designer」にはサンプルサイト25パターンのPSDも納められているので、デザイナー、コーダー、開発担当者それぞれの立場から参考になるのではないでしょうか?

ライセンスはMITライセンス。個人・商用利用ともにOKですが、無料DEMO版はリンクが必須です。
有料版でもクライアントワークのベースとして利用できますが、そのままの配布やジェネレーター、CMSでの配布はNGです。

DEMO版のダウンロードはこちら>>

Flat UI Pro



【WordPress】カスタムフィールドの値で表示を切り替える分岐条件タグ

ついこの間まで半袖で過ごしていたのに、11月に入って急に寒くなってきました!
あっという間に冬到来です♪

というわけで、本日の覚書は【カスタムフィールドの値で表示を切り替える分岐条件タグ】です。

WordPressをCMSとして扱う時に役立つのが【カスタムフィールド】ですが、
登録した値によって表示を変えたいときに役立つのが条件分岐!ですね。

たとえば、

ECサイトでカスタムフィールドに【セール価格】を設定して、
チェックしている場合はSaleアイコンをつけるとか。

Webサイトの紹介ページで【URL】を設定して、
サイトのURLを挿入している場合はリンクを張り、
URLが登録されていなかった場合は「HPはありません」と
メッセージを表示するとか。

    <?php if(get_post_meta($post->ID,'フィールド名',true)): ?>
    コンテンツを表示する
    <?php endif; ?>

カスタムフィールドに値が入っているかどうかで表示を切り替える簡単な方法でした。



【WordPress】 カスタム投稿のタクソノミー別に記事一覧を表示させる

あっという間に11月です。
今年もあと2ヶ月!年末に向けてメチャ忙しいGORI Style、ドイです。
今夜はWPのカスタム投稿とタクソノミーを使った投稿記事の表示メモなど。

CMS構築ではよく「お知らせ」や「メニュー」など
通常の投稿記事とは別に管理して投稿したい場合があります。
お客様の案件ではよくあることなので、時と場合によって(たいていはご予算に合わせて^^;)
カスタム投稿の設定をします。

カスタム投稿内のタクソノミー(分類)別に、1ページの中(固定ページ内など)で
記事を一覧表示させたいことはよくあります。 いろいろ調べてみたら、「記事一覧(タイトル)」や「記事一覧(タイトル+画像)」というパターンが多くて
今回自分の案件には当てはまらず困っていました。 とりあえずいろいろ試してみて、これならうまくいきそう…という結果がこれ。

<?php  $args=array(
        'tax_query' => array(
            array(
                'taxonomy' => 'カスタム投稿で設定したタクソノミー名', //タクソノミーを指定
                'field' => 'slug', //ターム名をスラッグで指定する
                'terms' => array( 'カテゴリー名を指定' ) //表示したいタームをスラッグで指定
            ),
        ),
        'post_type' => 'カスタム投稿の名前', //カスタム投稿名
        'posts_per_page'=> 100 //表示件数(-1で全ての記事を表示)
    );
?>

<?php query_posts( $args ); ?>

<?php if(have_posts()): ?>

<?php while(have_posts()):the_post(); ?>

ページが存在する場合の指定をここに記述

<?php endwhile; else: ?>

ページが存在しない場合の指定

<?php endif; ?>

<?php wp_reset_query(); ?> // 最後にリセットして終了!

思った値が出力されるまで、かなりハマったので次回のために備忘録として。



WordPress 記事内で記事リスト表示が簡単にできるプラグイン【List category posts】

WPにどっぷりはまりすぎのドイです-_-;

今回は【記事ページ内で関連記事などのリスト表示】についてのプラグインの紹介です。

投稿ページ・固定ページどちらを利用していても  
「このページの中で同じカテゴリーの他の記事のリスト表示させたい」  
「子カテゴリーの関連項目をリスト化して誘導したい」  
「個別ページ内で最新記事のリスト表示したい」

といった要望はよくあります。

各テンプレートphp内に直接記述をしていけばもちろん実装可能です。 でもできればもうちょっと簡単に実装したい!
というわけで「List category posts」というプラグインを導入してみました。 設定は簡単でした。

① プラグインの導入・・・「List categoriy posts」を検索する
② インストール~有効化する
③ 表示させたい場所にショートコードを記述

初期設定などは一切必要ありません。

ショートコードを[ catlist ]というショートコードを使い、そのパラメータで表示内容を指定する形になります。

ただこのショートコード。

投稿ページや固定ページの本文中には表示できるんですけど、

テーマファイル(例えば、index.phpやsingle.php)中に書いて
表示させたい、 反映させたい!
ってことが往々にしてあります。
※たとえば記事ページ内で「同じカテゴリの記事を5項目表示させたい」とか。
テンプレート内にショートコードを記述しても、そのままでは文字列が表示されるだけです。

その場合は、 do_shortcode()
を使用することで解決するとのことです。

具体的には、

<?php do_shortcode( '[ショートコード]' ); ?>

と、書きます。

ショートコードが何か出力をさせるものだった場合は、

<?php echo( do_shortcode( '[ショートコード]' ) ); ?>

と、「echo」などで囲めばしっかり表示されます。

・・・ということで、新しく関連記事リストを下記に表示させてみることにしました。



WordPressではカテゴリスラッグの重複はできない

WPのカスタマイズ案件でカテゴリースラッグ名で迷走してしまったのでメモしておきます。

たとえば下記のようなカテゴリ構成にしたい時に。

●カテゴリーA
>子カテゴリー名:info
>子カテゴリー名:map
>子カテゴリー名:form

●カテゴリーB
>子カテゴリー名:info
>子カテゴリー名:map
>子カテゴリー名:form

個別のカテゴリーの子カテゴリーに同じURL(スラッグ)をつけたかったのですが、
WPの場合は何も考えずにカテゴリー登録していくと

●カテゴリーB
>子カテゴリー名:info-2
>子カテゴリー名:map-2
>子カテゴリー名:form-2

このように、勝手にナンバリングされてしまいます。

MTでは静的生成なので、各カテゴリーフォルダに
実際に「info」というフォルダ(ディレクトリ)が
親カテゴリの下に作られる=名前は重複しても場所が異なるので問題ないです。

しかしWPは動的生成、カテゴリの親子関係は架空のもので、
実際URL上では親カテゴリも子カテゴリも並列に並べることができてしまいます。
よって、同じスラッグ名はつけられないんですね-_-;

このスラッグ名なのですが、他と重複してはいけません。
そして重要なことに「カテゴリとタグのどちらにおいても今まで使っていない」スラッグ名を新規作成する必要があります。
複雑なサイト構成。。。どう名前を付けていこうか? 悩まなくてはなりません。

これに気が付くまで一晩調べてしまったドイでした^^;