CMS（WordPress）などの技術ブログ

この話、結構知らない人がいるのでは、と思いエントリーしておきます。

Chromeのデベロッパーツールも最近随分使いやすくなっていますが、
開発モード全開の時には「要素を検証」を右クリックで開くのが煩わしくなってきます。

デベロッパーツールはF12かCtrl+Shift＋Iで開くことができますが、
そこから目的の要素に辿り着くのが少し面倒です。

「要素を検証 をどうしてもショートカットで起動したい」

このように強く思い、改めて調べてみたところ、
ショートカットキーを発見しました。

Ctrl+Shift+C

若干押しづらい組合せですが、これまでの苦労に比べたら全く気になりません。

同じ悩みを抱えてる方は是非お試し頂くと良いです。

縦や横に長いページの場合、スクロールしてもヘッダーやサイドメニューの位置は固定しておきたい場合があります。ちょうどExcelの「ウィンドウ枠の固定」を設定した状態の事です。普通のWebサイトで横にスクロールするようなケースは無いかもしれないですが、ちょっとそういうページを作る機会があり調べたのでエントリーしておきます。

固定ヘッダーを作りたい場合は、「position:fixed」で実現できます。横にも長いページがある場合、position:fixedで固定してしまうと、画面から横にはみ出た部分が一生表示されません。position:fixed は画面内の絶対位置を指定するスタイルなので、スクロールするという概念が無いのです。

つまり、縦にも横にも長いページのヘッダーを作りたい場合、
「縦にスクロールした場合は固定したいが、横にはスクロールできる」事が必要なのです。

で、調べたあげく、これを実現するjQueryのプラグインが存在しました。
かなりニッチなプラグインですが、こういうマニアックなものは嫌いではないです。

gpFloat

前置きが長くなりましたが、言葉で説明すると長くなりますので、
デモページを作っておきましたのでご参考下さい。

DEMO


固定したい要素は普通にposition:fixedで固定しておいて、
下記のように記述しておくと横だけスクロール可能です。

このようなHTMLがあったとして、「header」を縦だけ固定したいとします。

<div id="wrapper">
	<div id="header"></div>
	<div id="main">
		<div id="sidemenu"></div>
		<div id="content"></div>
	</div>
</div>

headerは position:fixed を指定。

#wrapper { position: relative; }
#header { position: fixed; }

後はこのように記述するだけです。

<script>
$('#header').gpFloatX();
$('#sidemenu').gpFloatY();
</script>

WordPressにはテンプレート階層という仕組みによって、
読み込まれるテンプレートファイルが自動的に決まってきます。

その振り分けに使われるのがスラッグです。
今回は「このスラッグが重複したらどうなるのか？」という話です。

スラッグは「投稿」「カテゴリ」「固定ページ」「タグ」に設定できます。

振り分けに使われるので「基本的に」WordPress内でスラッグは重複できません。
重複したスラッグを登録しようとするとWordPressに勝手にリネームされますので、
想定外のスラッグにされる前にスラッグは重複させない、ということが重要です。
（後で苦労する事を考えたら、安いものです）

先ほど「基本的に」重複できない、と書いたのは、実は例外があるからです。
例外とは「カテゴリと固定ページのスラッグは重複可能」という点。

重複するとどうなるのか。

パーマリンク設定次第では、スラッグがURLに使われますので、
重複したカテゴリページと固定ページのURLが同一になるケースがあります。
その場合、カテゴリページが優先されます。

category-sample.php　と　page-sample.php　があり、
これを呼び出すURLが同一の場合、「page-sample.php」はずっと呼ばれないままです。

忘れてるとハマるので、注意したいですね。
私も過去にハマった事がありますｗ

固定ページが呼ばれない事を逆手にとる方法もあります。

category-sample.php　はカテゴリ一覧ページなので、
このページ独自のコンテンツを登録する場所がありません。
（＝カテゴリ一覧ページ用の投稿とか無いので）

つまり、同じスラッグの固定ページを用意しておいて、
カテゴリー一覧ページにもWordPress管理画面からコンテンツの管理が可能なように仕込む、
という裏ワザが可能です。
具体的には category-sample.php の中で、同じスラッグ名でget_pageします。

あまりおすすめできませんが、WordPressのコアファイルを修正したりするよりはスマートでは無いかと思います。

Web制作をしていると、大量のデータを扱う場合が結構あります。
「生データ」をデータベースへ格納する前に整合性の確認をしたりと、データ加工は本当に奥が深い。

こんな時、まずすべき作業の一つに「重複チェック」があります。
こういうのはExcelにお任せすると便利ですので、その方法を幾つかメモしておきます。
どんな仕事でも使える技ですのでご参考下さいませー

今回のサンプルデータはこちら。
ここから重複データを排除していきます。


1.オートフィルタを利用する

オートフィルタに重複排除機能があるので、これを利用します。

1)データ→フィルタ　から対象データにオートフィルタをかける

2)データ→詳細設定　をクリック

3)「重複するレコードは無視する」をクリック

4)すると重複行は非表示になります



2.ピボットテーブルを利用する

ピボットテーブルでも実現できます。

1) 挿入→ピボットテーブル

2) どこにピボットテーブルを出力するか適当に指定
　　（今回は新規シートに作成）

3) 画面の右側の↓この画面で項目名をチェックします

4) すると重複は排除されます

但し、ピボットテーブルのデータはコピペするのに少々癖があるので、
筆者はあまり使わないです。
ピボットテーブルは集計したい時に使います。


3.COUNTIF関数を利用する

これはあまり知られてない方法かもしれません。
昔何かの本を見たのか、自分で編み出したのかさえ忘れましたが、
とりあえずこのように使います。

1) 表とは別の作業用の列に下記のように関数を入力
※範囲指定している個所の開始セルは「絶対参照＝$」にするのが重要です

2) そのまま表の下まで関数をコピーします

3) 作業列が「1」以外の行が重複行です。
オートフィルタで絞ると非表示にできます。

この関数で何をやっているかと言うと、
「自分を含めて、自分より上の行に、自分と同じ値が幾つあるか」を調べています。
つまり既に同じ値が上にあると、件数が2とか3とかになっていきます。
件数が1以外は全て重複行という訳です。

これも結局オートフィルタを利用するんですが、
重複している行にサクッとフラグを立てられるところが便利な方法です。
重複フラグを別の確認作業に使えたりします。

WordPressで制作するWebサイトは比較的ボリュームのあるサイトになる事が多い為、テンプレートファイル側に書く処理も膨大になりがちです。

そんな時、プログラマー的な発想をすると「共通化したい！」と強く思います。
（でも共通化をしすぎると逆にコードの見通しが悪くなるケースもあるので、バランスをとって程々に収めるのが重要です。）

今回はその方法を幾つかメモしておきます。


1.WordPressのテンプレートタグを利用する

WordPressではテンプレート階層を元にファイルを分割するのが前提となっていますので、下記のようなタグを使用するのがオーソドックスな方法です。

<?php
  get_header(); //header.phpを読み込む
  get_sidebar(); //sidebar.phpを読み込む
  get_footer(); //footer.phpを読み込む
?>

パラメーターを与える事で下記のような表記も可能です。

<?php
  get_sidebar('sub'); //sidebar-sub.phpを読み込む
?>

2.PHPのinclude文を利用する

こちらはPHPのinclude文を使用する方法です。
PHP的には全然特殊な方法ではありませんが、意外と気づかない方法だったりします。
パスの指定にはWordPressのグローバル定数「TEMPLATEPATH」を使用すると良いでしょう。

<?php
  include TEMPLATEPATH . '/sample_function.php';
  include TEMPLATEPATH . '/common/sample_function.php'; //下層ディレクトリも指定可能
?>

WordPressのテンプレートファイルは基本的に同一ディレクトリにフラットに配置しますが、この方法だと下層ディレクトリにファイルを配置できますね。

「テンプレートファイルは分ける必要があるけど記述する内容は同じ処理。でもfunction.phpの中に書くのもちょっと違う。」といった場合にもこれで共通化できます。