今年のWordFes Nagoyaは、実行委員&スピーカーとして僕自身成長できるもので感謝です！

皆様こんにちは！魚住諒です。
初めましての方「初めまして！」

初めましての方のために自己紹介させていただきます。

自己紹介

22歳で愛知産業大学短期大学通信教育部で英語を学んでいます。

詳しくは2016のリレーブログの僕の記事をご覧ください。
残り6日！大学生の僕がWordFes Nagoya&WordBench Nagoyaに参加するようになるまでを書かせていただきます！ | WordFes Nagoya 2016

今年の僕が登壇するセッションについて

WordPressのスキルを身につけるために、
PHPの勉強→WordPressの関数
と進むのが一般的で、僕もそうでした。

しかし、関数の扱い方を先に学んだ方が、テーマや、プラグインの中を前よりは読めるようになってるはずです。

もちろん、
配列やif文などの

基本的な構文
型
変数
定数
式
演算子
制御構造
関数
クラスとオブジェクト
名前空間
エラー
などなど

PHPの勉強は大分勉強しなくてはならないのは当たり前です。

ですが、関数から色々試して、繰り返してやっていくうちにスキルが身につくこともあります。

WordPressの初心者の方、僕も初心者ですが、
セッションのスライドや動画などを見て、実践してみて、WordPressに関する大きな一歩を踏んでください！

もちろん、「これからのWordPress × SSL on レンタルサーバ」の二の次でも構いません。

どんな人でも役に立てるようなセッションになるよう（理想）精一杯頑張ります！

予定

なぜWordPressの関数から一歩踏むのか
準備(記事内でPHPを動かせるようにする)
WordPressの関数を試してみよう！
テンプレートタグ&条件分岐タグ
フォーマット用関数
関数を定義する
この先を踏むために

※今回は初心者の方でもできるよう、PHPを記事の中で実行できるプラグインを使いますが、
こちらはセキュリテイが低くなるため、本番環境ではやらないようにお願いいたします。
（スライド、セッション中にも伝えます）

実行委員Webサイトチームの一員として担当したこと

2016では

* サポーター追加
* セッション情報入力
* スライダーの入力
* 直せるところの修正

その前に

GitHub -> 自動デプロイをKatzさんに実装していただいたことで、グループでサイトを作るということが実現し感謝してます。

2017では

それでは、僕が今回担当したこと、長くなりますが、書いていきます。

1.WordPressのインストール

* /wp/ 配下にWPインストール
* プラグインとテーマをインストール
* プラグインは、古いバージョンのものをアップデート
* 更新したプラグインを Git にアップ

2.受付システム実装

CampTix Event Ticketing — WordPress プラグイン
こちらのCampTixという名のプラグインを例年使ってるようなためCampTixを使って実装してます。

トップページに[参加申込]ボタンを付ける
グローバルナビゲーションのメニューに[参加申込]追加
サイドバーに受付ウィジェットを追加する

camptix.phpのチケットIDなど直に書いてましたが、

小田島さんが来年のためにカスタマイズしていただいてました！

// 受付用メールアドレスを設定
$email_addr            = 'entry@wordfes.org';

// 開催年を設定（毎年変更）
$this_year             = '2017';

// 宿泊のチケット ID を設定（毎年変更）
$ticket_stay_id        = 1230;

// セッションのみのチケット ID を設定（毎年変更）
$ticket_session_id     = 1224;


// 懇親会の振込名義人のカスタムフィールド ID（毎年変更）
$ticket_party_tix_name = 1229;

// 宿泊の振込名義人のカスタムフィールド ID（毎年変更）
$ticket_stay_tix_name  = 1232;

// 受付用メールアドレスを設定

$email_addr = '[email protected]';

// 開催年を設定（毎年変更）

$this_year = '2017';

// 宿泊のチケット ID を設定（毎年変更）

$ticket_stay_id = 1230;

// セッションのみのチケット ID を設定（毎年変更）

$ticket_session_id = 1224;

// 懇親会の振込名義人のカスタムフィールド ID（毎年変更）

$ticket_party_tix_name = 1229;

// 宿泊の振込名義人のカスタムフィールド ID（毎年変更）

$ticket_stay_tix_name = 1232;

CampTixの編集すべき camptix.php の場所
/wp/wp-content/plugins/camptix/camptix.php

実装完了したページはこちらです。
参加申し込み | WordFes Nagoya 2017 これから〜未来へ繋ぐ〜

サイドバーにウィジェットというのは。

こういうものです。
見た目を整えるのにちょっと頑張りました。

ウィジェットのファイルの場所
/wp/wp-content/plugins/camptix/inc/class-camptix-widget.php

3.タイムテーブル詳細

完成したタイムテーブル詳細がこちらです。

2017からWordPress.orgのアカウントをカスタムフィールドから表示できるように

$wordpressorg =get_field('session_wordpress_org');
----------
<?php
						endif;
						if ( $wordpressorg ) : ?>
							<a href="https://profiles.wordpress.org/<?php echo  $wordpressorg; ?>" target="_blank" class="wordpressorg-icon">WordPress.org</a>

$wordpressorg =get_field('session_wordpress_org');

----------

<?php

endif;

if ( $wordpressorg ) : ?>

<a href="https://profiles.wordpress.org/<?php echo $wordpressorg; ?>" target="_blank" class="wordpressorg-icon">WordPress.org</a>

content-session.php

/wp/wp-content/themes/wfn2017/SCSS/sessions.scss

アイコンはGoogleのAPIを使って、WordPress.orgのファビコンをお借りしました。
favicons (16×16) https://s2.googleusercontent.com/s2/favicons?domain_url=http://wordpress.org

	.facebook-icon,
	.twitter-icon,
	.wordpressorg-icon,
	.website-icon {
		float: none;
		width: auto;
		padding: 3px 10px 3px 23px;
    }

----------

	.wordpressorg-icon {
		background: url(../images/common/wordpressorg-icon) left center no-repeat;
		background-size: 20px auto;
	}

.facebook-icon,

.twitter-icon,

.wordpressorg-icon,

.website-icon {

float: none;

width: auto;

padding: 3px 10px 3px 23px;

}

----------

.wordpressorg-icon {

background: url(../images/common/wordpressorg-icon) left center no-repeat;

background-size: 20px auto;

}

SCSSなので是非、小石倉さんがやりがいを持っていただけると思い、分担しました。

完成したのがこちら

4.タイムテーブル一覧

今年は大幅にタイムテーブルが変わるため、
2016の状態ではダメで、課題がいっぱいでしたが、小田島さんのサポートのおかげで2017のタイムテーブルが出来上がりました！

$ses_id = $session_args[0]->ID; 
) 	$ses_tzs = get_the_terms( $ses_id, 'timezone' ); 
	
	if ( false !== array_search( $ses_id, $ses_array ) ) { 
); 	
	return; 
	
	} elseif ( null != $ses_id ) { 
foreach ( $session_args as $session_key => $session ) { 	
	$ses_array[] = $ses_id; 
	
	} 
	
	if ( 1 < count( $ses_tzs ) ) { 
	
	$rowspan = 'rowspan="' . count( $ses_tzs ) . '"'; 
	
	} else { 
	
	$rowspan = ''; 
	
	} 
	
	
	?> 
?> 	<td class="<?php echo esc_html( $stage->slug ); ?>" <?php echo $rowspan; ?>> 
	<?php foreach ( $session_args as $session_key => $session ): ?> 
<dt> 	<dl> 
	<dt>

$ses_id = $session_args[0]->ID;

) $ses_tzs = get_the_terms( $ses_id, 'timezone' );

if ( false !== array_search( $ses_id, $ses_array ) ) {

);

return;

} elseif ( null != $ses_id ) {

foreach ( $session_args as $session_key => $session ) {

$ses_array[] = $ses_id;

}

if ( 1 < count( $ses_tzs ) ) {

$rowspan = 'rowspan="' . count( $ses_tzs ) . '"';

} else {

$rowspan = '';

}

?> <td class="<?php echo esc_html( $stage->slug ); ?>" <?php echo $rowspan; ?>>

<?php foreach ( $session_args as $session_key => $session ): ?>

<dt>

/wp/wp-content/themes/wfn2017/parts/supporter.php

5.スライダー

小石倉 → 魚住 → 小田島さん(とても助かりました)

<div class="slider-container">
    <ul class="bxslider">
<?php
$args   = array(
    'post_type'      => 'slider',
    'posts_per_page' => -1,
    'orderby'        => 'rand',
);
$slides = new WP_Query( $args );
while ( $slides->have_posts() ):

    $slides->the_post();
    
    $url = get_field('wfn-slider-url');
    $img = wp_get_attachment_image_src( get_field('wfn-slider-image'), 'full' );
    
    if ( $url ):
?>
        <li>
            <a href="<?php echo esc_url( $url ); ?>">
                <img src="<?php echo esc_url( $img[0] ); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>">
            </a>
        </li>
<?php
    else:
?>
        <li>
            <img src="<?php echo esc_url( $img[0] ); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>">
        </li>
<?php
    endif;
    
endwhile;
wp_reset_postdata();
?>
    </ul>
</div>

<style>
/* a.bx-pager-link :active { color: #ea5514; } */

.slider-container {
    padding: 20px 0;
    background: #fff;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #ea5514;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	background: #DCDDDD;
}
.bx-wrapper{ margin: 0 auto !important;}
.bx-viewport {
    left: 0 !important;
    /*height: auto !important;*/
    border: none !important;
    box-shadow: none !important;
}
.bx-pager {
    display: none !important;
}

</style>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('.bxslider').bxSlider({
		auto: true,
		//margin: 0 auto 60px;
		slideWidth: 486,
		slideMargin: 30,
		slideHeight: 333,
		minSlides: 1,
		maxSlides: 2,
		infiniteLoop: true,
		speed: 1000,
		moveSlides: 1,
		//captions: true,
		speed: 300,
		pause: 6000,
		pager: false,
		controls: false,
		//pager: true,
		//controls: true,
		autoControls: false,
		autoHover: true, // マウスオーバー時に自動遷移を停止する
		randomStart: true,
		
		// スライドさせる要素の大きさ（幅）を指定する
		// デフォルトでは100%になり、スライドエリアと同じサイズになる
		//slideWidth: 0, 		
	});
});
</script>

<?php

$args = array(

'post_type' => 'slider',

'posts_per_page' => -1,

'orderby' => 'rand',

);

$slides = new WP_Query( $args );

while ( $slides->have_posts() ):

$slides->the_post();

$url = get_field('wfn-slider-url');

$img = wp_get_attachment_image_src( get_field('wfn-slider-image'), 'full' );

if ( $url ):

<li>

<img src="<?php echo esc_url( $img[0] ); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>">

</a>

</li>

<?php

else:

<li>

<img src="<?php echo esc_url( $img[0] ); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>">

</li>

<?php

endif;

endwhile;

wp_reset_postdata();

</ul>

</div>

<style>

/* a.bx-pager-link :active { color: #ea5514; } */

.slider-container {

padding: 20px 0;

background: #fff;

}

.bx-wrapper .bx-pager.bx-default-pager a:hover,

.bx-wrapper .bx-pager.bx-default-pager a.active {

background: #ea5514;

}

.bx-wrapper .bx-pager.bx-default-pager a {

background: #DCDDDD;

}

.bx-wrapper{ margin: 0 auto !important;}

.bx-viewport {

left: 0 !important;

/*height: auto !important;*/

border: none !important;

box-shadow: none !important;

}

.bx-pager {

display: none !important;

}

</style>

jQuery(document).ready(function(){

jQuery('.bxslider').bxSlider({

auto: true,

//margin: 0 auto 60px;

slideWidth: 486,

slideMargin: 30,

slideHeight: 333,

minSlides: 1,

maxSlides: 2,

infiniteLoop: true,

speed: 1000,

moveSlides: 1,

//captions: true,

speed: 300,

pause: 6000,

pager: false,

controls: false,

//pager: true,

//controls: true,

autoControls: false,

autoHover: true, // マウスオーバー時に自動遷移を停止する

randomStart: true,

// スライドさせる要素の大きさ（幅）を指定する

// デフォルトでは100%になり、スライドエリアと同じサイズになる

//slideWidth: 0,

});

</script>

/wp/wp-content/themes/wfn2017/header.php

土台を僕が作り
slideMargin: 30,など小石倉さんに手伝っていただきました。
小石倉さんのWordPresでのjQueryデビュー！

そして、小田島さんが、例年通り管理画面からスライド画像を追加、リンクを貼ることができるようにしていただきました！

6.一覧ボタン追加

										<div class="list-button">
										<?php if ( is_singular('topics') ) : ?>
											<style>
											.btn:hover {<br />
											background: #e85524;<br />
 											text-decoration: none;<br />
 											color: white;<br />
											font-size: 3rem;<br />
											}<br />
											</style>

											<p class="text-center"><a class="btn btn-warning btn-lg" href="https://2017.wordfes.org/topics/"><i class="glyphicon glyphicon-flag"></i> 一覧へ</a></p>
										<?php else : ?>
											<style>
											.btn:hover {<br />
									    	background: #e85524;<br />
											text-decoration: none;<br />
 											color: white;<br />
											font-size: 3rem;<br />
											}<br />
											</style>

											<p class="text-center"><a class="btn btn-warning btn-lg" href="https://2017.wordfes.org/blog/"><i class="glyphicon glyphicon-flag"></i> 一覧へ</a></p>
										<?php endif; ?>
										</div>