WordPressでサイト構築を行った際に
プラグインを使わずに検索部分を作ったのですが
その際に迷走して3時間程悩んだ事を書きたいと思います。
事の始まりは、カスタム投稿で制作された情報追加画面です。
一部、該当する事全てにチェックを入れて頂くために
1つの項目に5つのチェックボックスを設置して
情報を入力して頂くようにしました。
そのチェックボックスの情報を使って
検索ページでは、該当する物だけをピックアップするように
プログラムを組んだつもりでした…
実際、ある項目を除いては問題なく検索できていました。
まずは、王道中の王道。
『YouTubeを埋め込んだら？』『YouTubeを利用したコンテンツ案』
など、メジャーなだけに説得力も利用しやすさも飛び抜けているのは言うまでもないでしょう。
また、JQueryなどを使って背景にするなど連携できるプログラムが多いのも言わずもがな。既にお使いになっているのではないでしょうか。
また、『4K』『8K』サイズや『秒60フレーム』に対応しているなど素材としては言う事無しです。
ただし、仕事で使うとなると著作権等の問題も有りますので、検索時に『CC（クリエイティブコモンズ）』を加えて検索した方が安全です。
バリエーション豊富なおしゃれな動画素材がそろています
写真も動画もステキな物が多い!!
もはや完成された作品と言って良いクオリティ
日本のサイトでは、著作権の関係もあるせいか無料で見栄えのする物が探しにくいので、海外サイトを中心に探した方が見つけやすそうです。海外の人から見た日本の映像と言うのも良いかもしれません。
私がWordPressで構築する際に追加している
便利なソースをまとめてみました。
【固定ページ内の画像URLを簡単にする】
固定ページ内で画像を使う際に『get_bloginfo(‘template_directory’)』をイチイチ付けるのは面倒なので
サンプルでは『image/』が付いたらテンプレートまでのURLを付加します。
|
1 2 3 4 5 |
function replaceImagePath($arg) { $content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg); return $content; } add_action('the_content', 'replaceImagePath'); |
【カスタム投稿一覧でカテゴリでも絞り込みしたい】
投稿一覧ではカテゴリでの絞り込みはできますが
どう言う訳かカスタム投稿では絞り込みが用意されていません。
もっとも設定自体がユーザー次第なので付けようがないとは思いますが
カスタム投稿でも投稿数が増えると必要になってきます。
サンプルでは
《 カスタム投稿名:list ／ 分類名：cate 》
で記述しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
add_action( 'restrict_manage_posts', 'add_post_taxonomy_restrict_filter' ); function add_post_taxonomy_restrict_filter() { global $post_type; if ( 'list〔カスタム投稿名〕' == $post_type ) { ?> <select name="cate〔分類名〕"> <option value="">カテゴリー指定なし</option> <?php $terms = get_terms('cate〔分類名〕'); foreach ($terms as $term) { ?> <option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option> <?php } ?> </select> <?php } } |
【固定ページ内でPHPを使いたい⇒ショートコード対応】
今更なんですが、ショートコードの記述が理解しきれていませんでした…
基本的な部分は分かっていましたが…難しく考えすぎていたようです。
そんな同類の方に向けて、一番分かりやすい物を…
|
1 2 3 4 |
function indexft() { return "<a href='" . get_bloginfo('url') . "'>トップ</a>"; } add_shortcode('idxfc〔ショートコード〕', 'indexft〔関数名〕'); |
《indexft()》が関数になります。
“return”内で返す内容を用意。今回は、トップへ戻るリンク『トップ』が表示されます。
固定ページ、または投稿ページに《[idxfc]》と言うショートコードがあったら、ソコに『トップ』が表示されます。
【一定日数内の記事に”NEW”を付けたい】
ページ内で新着情報などの一覧表示部分で一定の期間だけ”NEW”マークを付けたい。
マークを付けたい部分に下記のソースを原だけでOK。
『echo』で吐き出しますので、画像でもタグ付でも
|
1 2 3 4 5 6 7 8 9 |
<?php $days = 7; //表示する日数。これは公開日から7日。 $today = date_i18n('U'); $entryday = get_the_time('U'); $kijiday = date('U',($today - $entryday)) / 86400 ; if( $days > $kijiday ){ echo 'NEW'; } ?> |
ホームページ制作をしている方は、一度くらいは使った事がある……と思う
『WordPress』
今まで、触った事が無かった方だと
『どのテーマを使ったら良いのか』『どのテーマが目的のデザインに合っているのか』など
イロイロと悩む事があるかと思います。
そんな時には、一番シンプルで分かりやすいテーマを使って構築するのが一番ではないでしょうか。
理解できない機能満載のテーマでは、何かあった場合の問題点を探すのにも時間がかかってしまいます。
では、テーマは何を使うか？
私が一番オススメするテーマが
『WPMEMO basic』
『無料WordPressテーマ「WPMEMO basic」を公開しました。』
テーマの特徴
WordPress3.0以上対応
IE6,IE7, IE8, IE9 , Firefox, Chrome,Safariで動作確認済み（ただし、IE6はカスタムメニューのドロップダウンが動作しません）
カスタムメニューに対応
ウィジェットに対応
無料・商用利用可
※利用の際の注意点を必ずお読みください。
このテーマ、本当に必要最低限のファイルしかありません。
imageフォルダは有っても、中身は何も入っていません!!
今まで通常のHTMLサイトを移行するには”持ってこい”のテーマです。
そして、WordPressの構造を学んだり、オリジナルテーマを作る時の基礎にもなりえます。
レスポンシブなサイトを構築しようとした場合でも、好きな物を組み込みながら制作できますので
WordPressに慣れている方も、簡単に使う事ができると思います。
もし、テーマ探しで悩んでいるようならクセの少ないテーマを使って構築してみてはいかがでしょうか。
レスポンシブなサイト制作をした際に便利そうだったものをアレコレまとめてみました。
制作前 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
今回は、フレームワークの利用を考えていて何を使うのが一番良いか迷っていました。
その時に便利だったのがコチラのサイト
[CSS Front-end Frameworks with comparison]
http://usablica.github.io/front-end-frameworks/compare.html
フレームワークが一覧表になっており、対応するブラウザ、LESSやSASSの利用可能状況、ライセンスやデバイスについてわかりやすくまとまっています。
制作中 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【小技】テキストの改行操作。
今更と言う方も多いかと思いますが…
テキストで見出しを設定した際に、思った所で改行を行いたかったため探しました。
改行したい所に改行タグをいれ、CSSで『display:none;』とし
メディアクエリで、今度は『display:block』とすれば改行されます。
もしくは、spanで要素を設定して、改行したい時に『display:block』を
設定すれば、改行となります。
【jQuery】Youtubeの動画を背景に設置。
使ってみたのは『jquery.mb.YTPlayer』。
jquery.mb.YTPlayer
http://pupunzi.com/
設置は簡単で、一通りのJS、CSSを読み込むのは他の物でも同じですが
設置場所のパラメーターがわかりやすくて良いんです。
”data-property”に値を設定するだけで良いのですが、以前からあるYoutubeのバラメータが使えます。
ただ、スマートフォンなどからアクセスした際には非表示になりますので、対応策が必要なのが玉にキズですが…
サイトの確認 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
各デバイスのチェック。
今では、ブラウザで確認できる物が多いですが、
『RWD Bookmarklet』
http://responsive.victorcoulon.fr/
このサイトにある『RWD Bookmarklet』ボタンをブックマークにドレッグ＆ドロップし、チェックしたいページでブックマークをクリックすると、iPhone、iPadの確認ができます。
それだけではなく、キーボードを表示するとどうみえるか？をチェックする事ができます。
また、VIEWPORT RESIZERも同じようにブックマームをしてチェックを行うのですが
iPhoneからAndroid、カスタムサイズでのチェックを行う事ができます。
テストサーバーを使って、閲覧にパスワードが必要な場合などは
このやり方が便利でいた。
『VIEWPORT RESIZER』
http://lab.maltewassermann.com/viewport-resizer/
探せば、結構イロイロと便利なサイトや、情報をまとめてくれているサイトが気付かないうちにあったりしますので日々のストック作業を行ってみてはいかがでしょう。
自宅で使っていたMacBookPro(Let2008)が、長年の酷使と熱？によりグラフィックボードが瀕死の状態となり画面がモノスゴイ状態からブラックアウトになるなど…使うのに困難をきわめ、修理に出してみれば
『古くて、もう部品ないっす』
などと言われしまう状況に…
新しいMacを買うにしても、こちらも予算的に瀕死の状態だったため「場繋ぎ」にと手元にあるLenobo YOGA Tab 10インチを自宅メインマシンとして使う事になしました。
果たして、AndroidOSはどこまでできるのでしょうか。
お客さまのホームページをリニューアルする際に、『お知らせ』部分をWYSIWYGエディタで書き込めるようにしました。
その時に使ったのが『openWYSIWYG』というWYSIWYGエディタ。
JavaScriptで開発されているエディタです。
この使い方とカスタマイズ、画像使用不可ですがChromeで使う際の修正を書いて行きます。
まずは、基本プログラムのダウンロード。
openWYSIWYG （ライセンス：LGPL）
http://www.openwebware.com/
非公式で日本向けカスタム版もあるようですが、使用前にご確認ください。
設置は簡単。ヘッダー内で「wysiwyg.js」と「wysiwyg-settings.js」を読み込み
使用するIDの定義はWYSIWYG.attachとして (‘要素ID’,’ツールバー設定’) で完了。
<script type=”text/javascript” src=”scripts/wysiwyg.js”></script>
<script type=”text/javascript” src=”scripts/wysiwyg-settings.js”></script>
<script type=”text/javascript”> WYSIWYG.attach(“txw1”, full);</script>
ツールバーの設定は『wysiwyg-settings.js』に書き込みます。
基本的な設定として
要素の幅 ［セット名］.Width = “100%”;
要素の高さ ［セット名］.Height = “250px”;
要素内の基本スタイル ［セット名］.DefaultStyle = “font-family: sans-serif; font-size: 14px;”
ツールバーのカスタマイズ。
デフォルトのツールバーは上から[0]、[1]の2段になっています。
それぞれの段に入るツールは『wysiwyg.js』内に『this.Toolbar = new Array();』として書いてあります。
区切り線も入れられるようで、”seperator”と入れれば縦線が入ります。
そして、これを踏まえて「wysiwyg-settings.js」に書き込めば専用のツールセットが出来上がります。
書き方は
［セット名］.full.Toolbar[［段数］] = new Array([ここに””と”,”区切りでツール名を書く]
たとえば、fullと言うセット名の場合
full.Toolbar[0] = new Array(“font”,”fantasize”,”headings”, … );
デフォルトのツールバーに対して、任意の段・任意の並びに表示したい場合
［セット名］.addToolbarElement(“［ツール名］”, ［段］, ［並び（右から何番目）］);
たとえば、fullと言うセット名で3段目の一番右に『フォントサイズ』を置く場合
full.addToolbarElement(“fontsize”, 3, 1);
とすればOKです。
さて、このエディタ、1つ大きな欠点があります。
Chromeに非対応です。
画像の挿入など画像に関わる部分を使用しないのであれば
2020行目付近にある
if ((navigator.userAgent.indexOf(‘Safari’) != -1 ) || !document.getElementById || !document.designMode){
をコメントアウトして
if (!document.getElementById || !document.designMode) {
を新しく追加すると”エラーは出なくなります”
欲しい素材が見つからないときは、あきらめて加工を行った方が以外と効率的だったりします。
そこで、和風の写真が欲しいけど…手元にあるのは『チョット…』な場合。
まぁ、そんな事はないと思いますが
実際に、どんな処理をすると”どう変わるのか”を動画でご覧頂こうと思います。
○加工項目
・髪の色、・目の色（カラーコンタクトだったので）、・口紅の色
・浴衣の色、・髪型の調整、・メイクの地味化。
作業時間17分を5分程度でご覧下さい。
写真素材：ぱくたそ（https://www.pakutaso.com/）
仕上がりは『続きを』ご覧下さい
Twitterも身近なツールとなっていますが、いろいろな利用をされるためタグといえる『ハッシュタグ』も乱立していて、普通に『日本語ハシュタグ』も増え続けています。
そこで、使われているハシュタグが何の意味を持った物なのか？
または、これから利用するハッシュタグが思わぬジャンルで使われていないかチェックする場合、使えるサイトがあります。
ハッシュタグクラウド：http://hashtagcloud.net/
このサイトでは、ハッシュタグの検索はもちろんの事
ジャンル別のランキング、開催予定のイベントで使われているハッシュタグ、最近出現したハッシュタグなどを見る事ができます。
1つのハシュタグに関し…基本的に登録制なのですが、タイトル、カテゴリー、ハッシュタグの説明を見る事ができます。（登録されていれば）
また、、関連するハッシュタグや最近のツイート状況も確認できるグラフも付いていますので、どれほどの勢いがあるかもチェックできます。
検索エンジンにも拾われやすいようなので、イベント・広告などでハッシュタグをもうける場合、先にハッシュタグクラウドで登録を行ってから拡散したほうが後々の拡散状況や関連するモノやコトをチェックする事が簡単にできますので少しでも情報は多い方が良いと思いますので、利用してみて下さい。
どうもKazです。
はじめて…と言っていい程、まともにcookieを触る事になりまして…
まぁ、さわったんですがね。
コイツが以外と一癖あるなって改めて思ったので、忘れないように書いとこうと思います。
今回はPHPで扱ったのですが、読み・書きはJqueryで扱うよりもカンタン♪
フォームのPOSTで渡す動きが飲み込めていれば、カンタンにおいしくお使い頂けます。
ただ、動きが…この動きが独特で…気づくまで頭を抱えてました。
【cookie】の生態
・いつでも読める、いつでも書ける。
・変数にもカンタンに内容を入れられます。
・読み込んで加工を加え書き込み、また読み込むと”加工前の内容”が入っています。
・cookieの削除を行っても”消えません”。
この生態の後半2つ。
通常の変数やレコードの書き込みに慣れてすぎていると、まったく感覚がつまめません…
書き直したのに、変わらない!!
消したのに、まだ有る!!
まぁ、扱い慣れている人ならば『何言ってんだ』と思うかもしれませんが…
ページを再度読み込まない限り内容が変わらないって言うのは、慣れません!!
cookieを扱う際は、書き込みは気にしなくて良いのですが
リアルタイムに内容を扱う際は、特定の変数に入れて
その変数をリアルタイムに変わるcookieとして使いましょう。
あとは、リロードの対策とcookieの賞味期限の調整をお忘れなく。
