この度、学び処 立志塾様のウェブサイトの新規立ち上げさせて頂きました。
細かい気遣いが売りだということだったので、サイトの方もいろいろと細かい事をしています。
技術的なことを言うと、
jquery hashchange eventでページ遷移は実現しています。
サイドバーはcss3のtransitionです。やっぱり軽快ですね。
またブログなんかはカスタム投稿やカスタム分類使ってみたり。
松本市在住で中高生のお子さんが居らっしゃる方は是非一度ご覧くださいm(_ _)m
フリーランスのフロントエンドエンジニア、WordPress エンジニアです
この度、学び処 立志塾様のウェブサイトの新規立ち上げさせて頂きました。
細かい気遣いが売りだということだったので、サイトの方もいろいろと細かい事をしています。
技術的なことを言うと、
jquery hashchange eventでページ遷移は実現しています。
サイドバーはcss3のtransitionです。やっぱり軽快ですね。
またブログなんかはカスタム投稿やカスタム分類使ってみたり。
松本市在住で中高生のお子さんが居らっしゃる方は是非一度ご覧くださいm(_ _)m
Facebookとかで”いいね!”をすると、そのページのdescriptionが表示されるようです。
せっかくなので、記事ごとにdescriptionを設定しようと思い、
WordPressワードプレスで記事の概要をdescriptionに設定する方法
のコードをまんま、コピーアンドペーストしたのですが、シンタックスハイライターを等でショートコードを使っていると、それがそのまま出力されてちょっと切ない事になってしまいました。
なので、それに対処してみました。
[php]
<?php if ( is_single() ) { // 単独記事ページの場合 ?>
<?php if ($post->post_excerpt){ ?>
<meta name="description" content="<? echo $post->post_excerpt; ?>" />
<?php } else {
$summary = strip_tags($post->post_content);
$summary = preg_replace("/\[[a-z,\/]*\]|\n|\r/", "", $summary);
$summary = mb_substr($summary, 0, 80). "…"; ?>
<meta name="description" content="<?php echo $summary; ?>" />
<?php } ?>
<?php } else { // 単独記事ページ以外の場合 ?>
<meta name="description" content="<?php bloginfo(‘description’); ?>" />
<? } ?>
[/php]
str_replaceだったのを、preg_replaceにして、ショートコード全般と、改行を取り去るように書き換えただけです。
正規表現を少し覚えると、色々悪さができて楽しいですね。
jQueryでAjaxをやるのって実際とても簡単なのです。
RSSリーダーやTwitterのFeed等を簡単に遅延読み込みとかできたり、ページ遷移無しに他のコンテンツをロードなど、色々できてしまいます。
超お手軽Ajax関数です。urlのページを表示します。また、urlの後ろにスペースを空け、続けてセレクタを書くと、その要素だけとってくることができます。
[js]
$("#loadArea").load("/hoge/ #hogehoge ul");
[/js]
で、/hoge/の
[html]
<div id="hogehoge">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
[/html]
ul以下を#loadAreaに表示します。
簡単ですよね?
jQueryでAjaxをやるときの親玉的存在です。
.load()のような手軽さは無いですが、色々細かい設定ができます。
[js]
$.ajax({
url: /hoge/,
context:this,
success:function(loadData){
var dataDom = $(loadData);
$(‘#hoge’, dataDom).appendTo("#loadArea");
},
error:function(){
$("#loadArea").html("エラーが発生しました");
}
});
[/js]
loadDataには、取得したテキストデータが格納されています。
また、jQuery1.5から
[js]
$.ajax({ url: "/hoge/" })
.success(function() {console.log("success");})
.error(function() {console.log("error"); })
.complete(function() {console.log("complete");});
[/js]
のような書き方ができるようになったみたいです。解りやすいですねー。
また、xmlとかもdataTypeを指定するととってこれるので、他のAPIとかとの連携も楽ちんです。
jQueryを使うとAjaxとかが、思いの外簡単にできてしまいます。これであなたも楽しいAjaxライフを満喫できること間違いなし!
ウェブルのsoraiyさんがCSS3 で3の倍数の要素にスタイルを適用するなんてエントリーを書いていたので、つい出来心でやってしまいました。
今更なネタな気もしないでも無いですがそこはスルーで。
せっかくなので、nth-of-typeでやります。
[css]
li {
list-style: none;
counter-increment: n;
display: inline;
}
li:after {
content: " , " counter(n);
}
li:first-of-type:after {
content: counter(n);
}
li:nth-of-type(3n):after {
content:" , Fizz";
}
li:nth-of-type(5n):after {
content:" , Buzz";
}
li:nth-of-type(15n):after {
content:" , FizzBuzz";
}
[/css]
[html]
<ol>
<li></li>
<li></li>
~略~
<li></li>
</ol>
[/html]
ちゃんとFizzBuzzになってるでしょう・・・?
別にliでやる必要性は無いんですが、同じものがたくさん並ぶときってついliでやっちゃいますよね。
カスタム分類ってデフォルトだと、
[plain]
http://example.com/カスタム分類名/項目
[/plain]
ってなってるんですが、これを
[plain]
http://example.com/カスタム投稿名/カスタム分類名/項目
[/plain]
にしたい時があると思います。そんな時のハックです。
2011-12-28追記:Custom Post Type Permalinksにこの機能は実装しています。是非そちらをお使い下さい。
[php]
add_action( ‘generate_rewrite_rules’, ‘my_rewrite’ );
function my_rewrite( $wp_rewrite ){
$taxonomies = get_taxonomies();
$taxonomies = array_slice($taxonomies,4,count($taxonomies)-1);
foreach ( $taxonomies as $taxonomy ) :
$post_types = get_taxonomy($taxonomy)->object_type;
foreach ($post_types as $post_type){
$new_rules[$post_type.’/’.$taxonomy.’/(.+?)/?$’] = ‘index.php?taxonomy=’.$taxonomy.’&term=’.$wp_rewrite->preg_index(1);
}
$wp_rewrite->rules = array_merge($new_rules, $wp_rewrite->rules);
endforeach;
}
add_filter( ‘term_link’, ‘my_term_link’ ,10,3);
function my_term_link( $termlink, $term, $taxonomy){
$t=get_taxonomy($taxonomy);
$wp_home = get_option("home");
$post_type = $t->object_type[0];
if(!isset($t->object_type[1])) {
$termlink = str_replace($wp_home,$wp_home."/".$post_type,$termlink);
}
return $termlink;
}
[/php]
上記のコードをfunctions.phpに書きこんでください。
デフォルトだと、http://example.com/カスタム投稿名/カスタム分類名/項目でアクセスしても、Not Foundになってしまうので、my_rewrite()で、リライトルールを追加します。
そして、下のmy_term_linkの方で、get_term_link等で出力されるURLを書き換えます。
この時、複数の投稿タイプに関連付けられているものは書き換えないようにしています。タグとかはそういう運用があるかと思います。
そういう運用をしない場合は
[php]
if(!isset($t->object_type[1]))
[/php]
を外しても大丈夫です。
[php]
$terms = get_terms(‘カスタム分類’);
foreach ($terms as $term) { ?>
<li><a href="<?=get_term_link($term->slug, ‘カスタム分類’);?>"><?=$term->name;?></a></li>
<?php
}?>
[/php]
で、カスタム分類の一覧がリンク付きで出ると思いますので、試してみてください。
Ajaxを使ったメールフォームとかってやっぱり素敵ですよね。
以前仕事で写真投稿付きのフォームを作らざるを得なかったので、どうせならということでAjax化しました。
というわけでjQuery.uploadを使って写真をアップロードして、サムネイルを表示するチュートリアルです。
2011-12-03追記:デモ作りました。jQuery.uploadを使ったフォームのデモを作りました。
Drupal7をいれたときにも書いたのですが、PECL全般に使えそうなので再度まとめです。
さくらのレンタルサーバーはデフォルトのPHPがPHP5.2.17になっています。
コントロールパネルからウェブ領域で動作するPHPのバージョンはPHP5.3.6等に変更することができます。
ですが、コマンドラインで動作するPHPは5.2.17のままなので、PECLを入れるとき若干PHP5.2.17用のものがインストールされてしまうので、PHP5.3用のモジュールをインストールしたときのまとめです。
WordPress3.0から追加されたget_themplate_partという関数がありまして。
[php]
get_template_part( $slug, $name );
[/php]
機能としては、get_headerなどの拡張版です。
“{slug}-{name}.php” をインクルードします。”{slug}-{name}.php” がない場合、”{slug}.php” をインクルードします。
小テーマ等が増えて複雑怪奇になってきたときに
[php]
get_template_part( "css");
[/php]
等と書いておくと、css.phpをインクルードします。
また、includeやrequireなどと違い、そのcss.phpの中でもwordpressの関数が動作します。
twentytenでは、
[php]
get_template_part( "loop","archive");
[/php]
のような使い方をして、記事の表示の部分をloop.phpに統一しています。メンテンナンス性が上がりますね。
Drupal7で営業日カレンダーをちょっと作ってみました。
Drupal7でブロックモジュール周りのAPIがだいぶ変わったようでほとんど英語の情報ばかりでしたけれど。。。
一応http://api.drupal.org/api/examples/block_example–block_example.module/7/source
を参考に頑張ってみました。
未だにcheckboxesがよく分からないので避けていたり、そもそもAPIもちゃんと理解しているか怪しいので、かなり冗長なコードになってしまっていますが・・・・・
OpenPNE 3.6 Beta5 をhetemlにインストール(失敗編)”なんてエントリーを昔書きましたけれど、
解決したのでメモ。
インストール時に手動で作成する、ProjectConfiguration.class.phpに
[php]
ini_set(‘memory_limit’,’64M’);
[/php]
と1行書き加えてあげるだけで上手くインストールが出来ました。
ちなみにhetemlだと.htaccessにphp_value を書くと500になってしまうので要注意です。
書くにももっといい場所はあるのかもしれないけれど、とりあえず、現状はこれで解決です。
最新のブラウザだとベンダープレフィックス無しでborder-radiusが使えるようになりました。
そんなわけで仕事で使おうと思いましたが、ちょっとしたトラブルが。
border-radiusを掛けた要素にoverflow:hiddenを掛けたときの挙動が各ブラウザでちょっと違います。
そんなわけでそのまとめです。
さくらのレンタルサーバーのビジネスプランにDrupal7をPHP5.3.6で導入したのでその時の記録です。