第4回ゆるふわ勉強会

一晩で作れるWordPressによるスライド資料!

第4回ゆるふわ勉強会

第4回のゆるふわ勉強会をやりました。今回は初ハンズオンセッションということで、WordPressのテーマを1から作ろうっていう感じでした。ハンズオンのまとめは、公式にあがるんじゃないかなーとか思うので、こちらでは自分のLTの発表をまとめようかと。

ちなみに、今回のゆるふわはスタッフ含めて30人の方にご参加いただきました。福岡から来てLTしてくれた、@andante0727さんと@naoyuki003jpさん、ゆるふわで初めてのLTということでやってくれた@kazurasakaさん有難うございました!

WordPressで作られたサイトの見つけ方

当日発表したタイトルと違いますけど、よくよく考えるとタイトルこっちが正しいなと。メインに発表した内容は下記の通り。

  • WordPressの向き不向きを理解しておこう!
  • ブラウザ拡張機能を使って、WordPressサイトを探す
  • WordPressで作られたサイトは、Googleで探す
  • 星野さんの発言を追う
  • 実際に作られたサイト紹介

【スライド】WordPressで作られたサイト紹介はじめました

ちなみに今回、星野さんを勝手に取り上げてましたが、星野さんの「WordPress 3.x 速習デザイン」はWordPressの入り始めがとても分かりやすいため、お勧めです。

なんか本ない?」って聞かれたら大抵こちらか、「WordPressの教科書」をお勧めしている気がします。LT時の星野さんの話題性についてはさすがということで、たぶん一番受けがよかったかもしれない。なので、こちらの記事で感謝とごめんなさいという意思表示を。

スライドをWordPressで作ってみた


さて、今回の記事の本題です。

最近、html+jsとかでスライド発表する人を何人か見かけていたので、やってみたら楽しそうだなーと思ってました。そして、ゆるふわとかでWordPress語っちゃってるけど、あんまり作ってないねってことで、今回はWordPressで作ってみました。

どうやって作る?

html+css+jsで作る!それをWordPressのテーマ化!そしてあとは記事投稿するだけ!

前日の夜からスライドを作りはじめたので、実質一晩で全部終わるということで、ちょっと工夫してみたいなって人はやってみると楽しいかもしれません。

ちなみにLTをしてくれた葛さんも、html+jsでスライドを作ってらっしゃいまして、ネタが被った!?とか思ったんですが、WordPressにはしていなかったのでセーフということで。

【葛さんのブログ】ゆるふわ勉強会第4回:LTしてきました。
http://tecgatao.gob.jp/?p=142

WordPressのテーマ

テーマ作り
TwentyElevenの子テーマで作ってます。構成ファイルは下記の通り。

  • index.php
  • header.php
  • footer.php
  • style.css

子テーマってどうやって作る?

  1. /wp-content/themes/以下に「yurufuwa004」のフォルダ作成
  2. style.cssを作成し、下記を記述する。
    /*
     Theme Name:     yurufuwa004
     Template:       twentyeleven
    */
  3. TwentyElevenからindex.phpとheader.php、footer.phpをコピーする
  4. あとは必要なところ以外を削除する

パララックスがやりたかった

最近流行りのパララックスデザイン。いくつかJSのプラグインが配布されているようでしたので、今回は「curtain」っていうプラグインを使用させてもらいました。こちらは矢印キーで操作が可能だったので、スライドっぽいなってところで。
デモでも激しい動作はついていけないようなので、実際にサイトに導入する場合は要検討ですね。

  1. jsを読み込む
    デフォルトのjQuery消して落としてきたjQuery読み込み。この辺はどっちでもいいだろうけど
    ディレクトリの読み込みパスを「stylesheet_directory」に変更。
    <?php
     wp_deregister_script('jquery');
     wp_enqueue_script('jquery', get_bloginfo( 'stylesheet_directory').'/js/jquery-1.7.2.min.js', array(), '1.7.2');
     wp_enqueue_script('curtain', get_bloginfo( 'stylesheet_directory').'/js/curtain.js', array(), '1.7.2');
    ?>
  2. Script要素をfooterとかに書く。
    <script>
        $(function(){
           $('.curtains').curtain({
               scrollSpeed: 450
           });
        });
    </script>
  3. htmlの要素は「ol」と「li」で構成。デモでは、articleも使ってたのでとりあえず従う。
    <?php $loop = new WP_Query( array( 'post_type' => 'slide', 'order'=>'ASC', 'posts_per_page' => 20 ) ); ?>
    <?php  if ( $loop->have_posts() ) : ?>
    
     <ol class="curtains">
    
      <?php while ( $loop->have_posts() ) : $loop->the_post(); $loopcount= $loop->current_post;?>
      <li id="section-<?php echo $loopcount ;?>">
       <article>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
       </article>
      </li>
      <?php endwhile;?>
    
     </ol>
    
    <?php endif; wp_reset_postdata(); ?>
    WPでループさせてます。カスタム投稿タイプ使ってますが、この辺使った理由は後述します。

カスタム投稿タイプを使った

普通に投稿でいいんじゃない?って思うんですが、「今回の発表スライド」「ギャラリーサイト」作ってそこに繋げたかったので、投稿とは別にカスタム投稿タイプにしました。スライドの最後までいったら、ギャラリーサイトとかに飛ばしたら楽しいかなーとか妄想してました。まぁ、ギャラリーサイトは作れなかったので、残念

WordPressで作ってみた感想

スライドのソート面倒だったので、時間順にしていたんですが、途中にスライド混ぜて調整とかは結構大変です。でも記事内に画像入れるのとか、cssとかでバランス取れるのは楽でした。windowsでプレゼンモードにすると解像度設定がうまくいかなかったため、見切れてしまうことがありましたので、この辺は要調整だなぁと。

で、結局のところ1回限りでの使用は激しく向いていないので、今後スライド発表とかで使うとかいう場合にはいいんじゃないかなー。次回以降でも使うんであればカスタム分類で分けるとか?その辺は工夫が必要そうですよね。

第4回のゆるふわ勉強会の感想

30人規模というのは初めてで、更にハンズオンスタイルということで、難しかった点が多かったです。ただ、ある程度対象者レベルは制限されるのですが、HTMLとCSSでサイトは作れるけどって人が、テーマ作成の全体の流れを掴んでもらえたら嬉しいかなぁと思います。

今回はリピーターの方が多く参加してくれて、さらに懇親会もゆるふわ初の大人数ということで、何気に盛り上がりました。

というわけで、今回ご参加いただきました皆様と会場を貸して下さった株式会社モールス情報システム様と舞木さん、有難うございました。ちなみに、自分的には、奥さんとなぜか義父がいる状態での発表ということで、なんとも不思議な勉強会でした。

トラックバック

TRACKBACK&PING

TrackBack URL :

コメントを残す

メールアドレスが公開されることはありません。