Wordbench富山勉強会2015年6月第1回


勉強会概要

日時
平成27年6月22日(月)
場所
富山新世紀産業機構 情報ビル 第7会議室
参加メンバー(9名)
古川さん(司会)、神垣さん、太田さん、増子さん、谷口さん、樋口さん、山本さん、笠谷さん、佐野さん、上市さん、古谷さん、村上(書記)

プログラム

    • 13:30〜13:45 自己紹介、名刺交換会
    • 13:45〜15:10 初心者向け
    • (1)各CMSの比較。どれが便利?使いやすい? WordPressとJimdoとWix
    • (2)写真サムネイルギャラリーみたいなのを、カスタム投稿タイプで作る方法
    • 15:10〜15:20 休憩
    • 15:20〜16:30 中上級者向け Git講座
      SourceTreeとGitではじめるバージョン管理をするとどれだけ便利になる?

初心者向け【1】各CMSの比較(JimdoとWixについて)

Jimdo(ジンドゥー)

    • プランは3種類。フリープランはサブアカウントとなる
    • JindoCafeというイベントを行っている
    • KDDIとの提携がありサポートの充実など、ヒートアップ感がある

Wix(ウィックス)

    • プランは4種類フリープランはサブアカウントとなる
    • サポート等のサービスも有しているが、認知度的はまだ低い
    • 本社は技術革新の国として知られるイスラエル。phpのメッカで生まれたこのツールの今後は如何に

共通点

    • 独自ドメインを取得すればお金がかかります
    • デザイン、機能のコアな部分をいじるにはやっぱり専門的な知識が必要

 

関連項目として話に出たこと

    1. 各CMSのシェア→2015年の年始に書かれたCMSシェアについての記事を見て歓談。一次ソースはコチラ
    2. 国内CMSの遷移あれこれ、static VS CMSについて、セキュリティについて等々
    3. ルートディレクトリにあるwp-load.phpを読みこめばWordPress関数が呼び出せる?
      1. ↑検証してみました。static.phpというファイルを作りwp-load.phpをrequireすると関数を呼び出せました!

 

初心者向け【2】写真サムネイルギャラリーみたいなのを、カスタム投稿タイプで作る方法

写真ギャラリーを簡単に作成することにすることで、ユーザーで自己完結できるようにする

    1. プラグインのcustom field suiteとresponsive lightboxをインストール
    2. custom field suiteの設定
    3. スライドショー:ライトボックスの設定
    4. 呼び出しソースの記述を追加

1については省略

2.custom field suiteの設定

custom field suiteを有効化するとダッシュボードの左のバーにフィールドグループの項目が出るのでクリック。グループ名を入れ、投稿タイプを設定。

スクリーンショット 2015-07-02 00.17.29

投稿タイプはカスタムしていればプルダウンメニューで選択肢として表示されます。

投稿タイプは今回はpost。次に新規フィールドをクリック。フィールドのタイプに気をつけながら3つ作ります。

スクリーンショット 2015-07-02 00.12.21

スクリーンショット 2015-07-02 00.12.09

 

そして下の2つを入れ子にしますがこれがちょっとシビアです。ドラッグアンドドロップで並び替えと入れ子のどちらでも可能ですが、入れ子のほうが受け付けのドット座標が狭かったので比較検討しました。

青いL字状の部分の下端に黄色い部分があれば並び替え。下端がそのまま下まで突き抜けていれば入れ子です。ドロップしましょう!文章ではわかりにくいのでスクショを。

スクリーンショット 2015-07-02 00.39.06

入れ子成功↓

スクリーンショット 2015-07-02 00.29.07

3.ライトボックスの設定

メニューバーの設定の項目にレスポンシブLightboxがあるのでセレクタを設定。ここではデフォのlightboxのままです。

4.ソースの追加

呼び出したい箇所に以下のソースを追加。

<div class="hoge">
<?php $fields = $cfs->get('worksimage');
foreach (($fields) as $field) {
?>

<?php
$attachment_id = $field['images'];
if(empty( $attachment_id) ===false){
?>
<?php $fieldName = wp_get_attachment_image_src($attachment_id, 'thumbnail');?>
<?php $fieldName2 = wp_get_attachment_image_src($attachment_id, 'large');?>
<a href="<?php echo $fieldName2[0]; ?>" rel="lightbox" title="<?php echo $field['caption']; ?>" alt="<?php echo $field['caption']; ?>"><img src="<?php echo $fieldName[0]; ?>" title="<?php echo $field['caption']; ?>" alt="<?php echo $field['caption']; ?>" ></a>
<?php } ?>
<?php } ?>
</div>

(編集後記;増子さん、議事録執筆にあたり資料の再提供ありがとうございました!!)

SourceTreeとGitではじめるバージョン管理をするとどれだけ便利になる?

      • Gitだけではなくて、SourceTreeを組み合わせて使うと幸せになれるよ
      • SourceTreeはGitだけでなくて、Bitbucketもいける

用語解説(よく耳にすること)

      • レポジトリ→プロジェクトと1対1の関係。サーバー上に一つ、ローカルのPCに一つ
      • クローン →親元(サーバー)からローカルにコピーすること。ここでスタートライン
      • コミット →ローカルで行った作業を保存すること。SourceTreeではコミット単位で履歴が残る
      • プッシュ →手元でコミットされた内容をサーバーにアップロードすること
      • プル   →サーバーから変更点をダウンロードすること。同期するようなイメージ
      • 衝突   →編集箇所に被りがありこと。衝突が起きているとプッシュが通らない。行番号で管理しているので稀に起こる

WP案件を具体例に何を配置すれば良いのか

      1. テーマディレクトリ(小テーマを作る場合には親テーマも)
      2. プラグインディレクトリ
      3. デザイン系(Ai、Psdのデータ、スライスしたデータ、Png、Jpg)
      4. 顧客から送られてきた色々なファイル
      5. バックアップ(sqlをダンプしたファイル。プラグインによる自動化はいまのところできない)

tips

      1. ショートカットやエイリアス機能をうまく使いXAMPやMAMP環境での参照先と絡めると便利
      2. その際、ドメインごとにWPファイルを作るとより幸せになれます
      3. Gitはフリープランで公開設定。Bitbucketは基本的に非公開
      4. Bitbucketのレポジトリ名だけは英語で書きましょう!しれっと誘導してあります

スクリーンショット 2015-06-25 12.48.59

以上、ご指摘ご鞭撻等ありましたらこっそり教えて下さい。こっそり訂正します。(書記;村上)