[WordPress]OGP画像をパターンによって出し分け

keis on 2019-05-14

突発的に必要になったため、備忘録としてメモ。
「OGP画像はすでにあるけれど、これ以降の投稿は任意の画像をOGPに設定したいな！（テヘッ）」
・・・みたいな時に役立つかと思います。

functions.php

function delete_domain_from_url( $url ) {
if ( preg_match( '/^http(s)?:\/\/[^\/\s]+(.*)$/', $url, $match ) ) {
$url = $match[2];
}
return $url;
}

header.php

<?php if ( is_single()) : ?>
<?php $customfield = get_post_meta($post->ID, 'CF_NAME', true); ?>
<?php if( empty($customfield) ): ?>
<meta property="og:image"content="<?phpechohome_url() .delete_domain_from_url(wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )[0]); ?>">
<meta name="twitter:image"content="<?phpechohome_url() .delete_domain_from_url(wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )[0]); ?>">
<?php else: ?>
<meta property="og:image"content="<?php
$fileid = get_post_meta($post->ID, CF_NAME, false);
$file = wp_get_attachment_image_src($fileid[0], 'full');
echo$file[0];
?>"/>
<meta name="twitter:image"content="<?php
$fileid = get_post_meta($post->ID, CF_NAME, false);
$file = wp_get_attachment_image_src($fileid[0], 'full');
echo$file[0];
?>">
<?php endif; ?>
<?php else : ?>
<!-- DEFAULT OGP -->
<meta property="og:image"content="<?phpechohome_url() ?>/img/ogp.png">
<meta name="twitter:image"content="<?phpechohome_url() ?>/img/ogp.png">
<?php endif; ?>

参考：

[WordPress]Custom Field Suiteのdateピッカーで曜日も出力する

keis on 2019-03-22

以下の条件で、カスタムフィールド製造した案件があった。

dateピッカーで日付を選択したら、以下のように表示
Y年m月d日(曜日)
dateピッカーでの項目が空の場合、セレクトボックス値「event_weeks」から曜日を選択して出力

ググってもなかなか見つからなかったため、複数記事を参考にして実装しました、という個人的メモ。

プラグインは、Custom Field Suiteを使用。
$event_weeks には、選択項目として「月・火・水・木・金・土・日」を指定。

<?php
$get_event_day = get_post_meta( $post->ID , 'get_event_day' , true );
$datetime = date_create($get_event_day);
$week = array ( '日', '月', '火', '水', '木', '金', '土' );
$w = (int)date_format($datetime, 'w');
$youbi = $week[$w];
if(empty($get_event_day) === false){
echo date('Y年m月d日'. ' (' . $youbi. ')', strtotime($cfs->get('get_event_day')));
} else {
$values = CFS()->get('event_weeks');
if (is_array($values)) {
foreach ($values as $value => $label) {
if ($value === end($values)) {
echo $value;
}else{
echo $value." - ";
}
}
}else{
echo $value;
}
} ?>

参考：
『Advanced Custom Fields』のデイトピッカーから曜日を割り出す
テンプレートタグ/get the date
日付や時刻の取得 設定 表示方法とフォーマットの使い方
phpの日本語での曜日の取得の仕方

[WordPress]インハウスで使っている実装あれこれ

keis on 2019-03-15

弊社のコーポレートサイトは、WordPressで実装しています。

自分が入社して、早３年目。
現在は、製品ページのみ担当となりましたがこの３年間、ビジュアルも実装もガラッと変わってきました。
変化がないと楽しくない、そう変化を楽しんで行かなきゃつまらない。

そんなこんなで、最近、事例ページをリニューアル

事例ページをどーんとリニューアルしました。
見た目は地味・・・いやいや、シンプルですが。
実はいろいろ実装を修正いたしました。

変わっていない箇所

  • 基本仕様は、カスタム投稿タイプ&カスタムフィールド
    カスタム投稿タイプはfunctionsに記述、カスタムフィールドは「Custom Field Suite」を利用しています。

変わった箇所

今回、どうしても変えたかったところ

  • コードのパーツ化
    今までのテンプレートは、同じコードを書くことが多く、修正する際、非常にコストでした。
    今回はじっくりと時間をかけられたため、できる限り、コードのパーツ化をすることができました。

今後、事例が増えていくに従い、改修ポイントは出てくるかと思います。
ユーザーに製品価値を与え続けていくために、ユーザー自身がどのような視線で製品を見ているかを察し、それに呼応したアイディアをデザインしていけたら、と考えています。

「おしい！広島県」「iida UI」からクリエイティブのヒントを探ってみませんか？

keis on 2012-10-22

「おしい！広島県」といえば、今年打ち出された、広島県のキャンペーンPRですね。
「iida UI」といえば、INFOBARのUI（ユーザーインターフェイス）デザインですね。

この２つに共通するもの。
それは、「広島県」。
（iida UIを手がけられたtha社には広島県出身のデザイナー奥田さんがいるのです、はい。）

CSS Nite in HIROSHIMA,Vol.5では、これらふたつのクリエイティブをテーマに、ものづくりのヒントを探るいい機会かと思います。
Read More

デザインは見た目だけじゃない。

keis on 2010-12-03

「HTML5といえば」で名前が挙がる方である、矢倉さん。
そんな彼のGDDでのセッションが上がってた。
＃当日、会場にいたのにも関わらす見ることができなかったのが残念でならない・・・
Read More