投稿者:

「WordBench福井 第21回勉強会 -恒例の質問大会もあるよ!」振り返り

11月 6, 2016 (福井)

img_5380

こんにちは! teckingです!

2016年10月29日(土)、昨年12月の『WordCrab Fukui 2015』以来となる第21回勉強会を開催しました。

JR福井駅東のコワーキングスペース『Rink{s}』で行われた勉強会には、スタッフ含め16人が参加。久しぶりの勉強会ということでカッチリしたプログラムは設けず、ゆるやかな雰囲気の中で

  • テーマ作成のスキルアップにつなげよう WordPressサイト解体ショー(ディレクターズカット版)……森川徹志さん(というか私)
  • 『Twenty Seventeen』のぞいてみたレポート……森川徹志さん(というか私)
  • みんなでお悩みシェア! WordBench福井 恒例の質問大会
  • 『Twenty Sixteen』で作った『めがね米』サイトとお米の紹介……meganeさん

という内容で約4時間の勉強会を進めました。

 

テーマ作成のスキルアップにつなげよう WordPressサイト解体ショー(ディレクターズカット版)

『WordCamp Tokyo 2016』で行われた同名セッションの再演。WordCampでは時間の関係でカットされたスライドを一部追加し

  • WordPressで構築されたサイトの見つけ方
  • 要件に応じたプラグインなどの実装
    • メールフォーム
    • モバイル対応
    • サイト内検索
    • 多言語対応

などについて、日本語圏のサイト実例をあげながら紹介していきました(下の共有スライドはWordCamp Tokyoのものです)。


 

『Twenty Seventeen』のぞいてみたレポート

勉強会前日、WordPress 4.7 Beta 1 が公開されたというタイミングもあり、次期バージョンのデフォルトテーマである『Twenty Seventeen』をみんなでのぞいてみました。

img_5382

『Twenty Seventeen』はこんなデザイン。カスタマイザーを使って、フロントページ上部にYouTubeやVimeoの動画を埋め込むこともできちゃいます!

4_7_b1

  • インストール方法
    • 4.7 Beta 1 のZIPファイルをダウンロード→展開してインストール
    • WP-CLI でも ––version=nightly オプションでインストール可能
  • レイアウトをざっくり拝見
    • フロントページ・固定ページは1カラム、投稿テンプレートは2カラム
    • もちろんレスポンシブ
    • 下へスクロールするとグローバルナビがウインドウ上部で固定(PCの場合)
    • .site-title に text-transform: uppercase; が指定されており、デフォルトでは英小文字が表示できない
  • カスタマイザー
    • 編集可能領域に鉛筆アイコンが出て、より直感的な編集ができるようになった
    • テーマオプション
      • フロントページに固定ページのタイトル・コンテンツを呼び出せる
      • 固定ページにアイキャッチ画像を入れると、トップページに全幅表示される
      • 「フロントページ設定」で「投稿」フロントページ設定するとブログの最新記事3件も表示可能
    • Additional CSS
      • 子テーマ作るほどの改変でない場合活用できそう
      • 上記の text-transform: uppercase;  問題をここでカスタマイズしてもよいのでは
  • テンプレート
    • header.php
      • head セクションが実質3行とすっきり
      • ヘッダイメージもグローバルナビもモジュール化
    • single.php
      •  やっぱり使い道がわからない投稿フォーマット……
        • template-parts/post 内にテンプレートあり
    • functions.php
      • add_theme_support( ‘starter-content’ )
        • 投稿やウィジェットの初期値(タイトルや本文など)を設定できる
        • 4.7 よりコアにてサポート
          • wp-includes/theme.php に初期値の記述あり
          • text-domain にも対応
      • twentyseventeen_resource_hints()
        • DNS プリフェッチで Google Fonts の読み込みを高速化
        • wp_resource_hints() へのフックで実装
      • get_theme_file_uri()
        • 4.7 で登場した関数
          • get_template_directory_uri() と get_stylesheet_directory() のラッパー
          • 引数(ファイル名)の / を ltrim してくれる
          • get_theme_file_uri( ‘path/to/image.jpg’ ) というように書く
            • get_template_directory_uri()  . ‘/path/to/image.jpg’ とか書かずにすむようになるので地味にありがたい
      • wp_style_add_data()
        • wp_enqueue_sctipts() と連携して、特定の条件のときだけスタイルを読み込む
        • 読み込み条件は $key と $value で指定
          • $key == ‘conditional’, $value == ‘lt IE 9’ の場合に assets/css/ie8.css を読み込むなど
      • twentyseventeen_content_image_sizes_attr()
        • wp_calculate_image_sizes() と組み合わせ、ビューポートに対応した画像表示幅を計算
        • 767px 以下 89vw, 1000px 以下 54vw, 1071px 以下 543px, それ以上 580px
          • vw はビューポートに対する幅の割合
    • get_parent_theme_file_path()
      • 4.7 で実装された関数
      • なぜかこれだけ require で呼び出してる
      • 親テーマのファイルパスを取得する関数
  • その他
    • CSS
      • html の lang 属性で letter-spacing を変えている
    • アイコン描画
      • フッタのソーシャルアイコンを SVG で描画している

 

みんなでお悩みシェア! WordBench福井 恒例の質問大会

参加者のみなさんから質問を受け付け「分かる人が答える」「みんなで知恵を出し合い解決する」という質問大会。

  • タクソノミーアーカイブで get_posts() がうまく機能しない
  • functions.php で the_excerpt() の出力結果を改変したいが、記事へのパーマリンクが出力されない
  • header.php に script タグを並べるときってどうやって書くのがいい?
  • データベースのバックアップ・リストアってみなさんどうやってますか?

といった質問があり、みんなでテンプレートファイルのコードとにらめっこしたりしながら一つ一つ質問を解決していきました。

img_5383
 

『Twenty Sixteen』で作った『めがね米』サイトとお米の紹介

「勉強会に偽装してカニ食べる会=WordCrab」という設定でもないのに、遠路東京から『WordCamp Tokyo 2013』実行委員長を務めた「megane」さんも参加。meganeさん、福井の精米業者さんとコラボした『めがね米』のディレクターでもあるということで、WordPressで構築した『めがね米』サイトの紹介かたがた、米そのものの特徴についてもアピってくださいました!
 

そして懇親会へ!

勉強会後のお楽しみは、JR福井駅近くにあるフレンチのお店『グルトンヌ』にて。このお店のサイト、WordPressでつくられてます(すばらしい!) WordBenchの懇親会にふさわしいお店ではないですか!

img_5390

WordPressサイトの構築や開発環境の話題が飛び交う中、「Apple Payトラブルあれこれ」を披露したmeganeさんの話がたいそう盛り上がりました。meganeさんいわく「いまApple Payのトラブルの話をさせたら、かなりおいしいネタもってますよ僕」とのことです 🙂

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ツールバーへスキップ