24

SmartCustomFieldsでニュースサイト風出力

まなめはうす さんリスペクトなのでニュースを投稿しやすくカスタマイズ。

投稿画面作成

モンキーレンチさまのSmart Custom Fieldsを使用させてもらってます。テーマもhabakiri、モンキーレンチさま最高!ステキ。

  1. プラグインSmart Custom Fields WP:https://ja.wordpress.org/plugins/smart-custom-fields/ をインストール。
  2. カスタムフィールドを設定
    01繰り返しにチェックを入れてニュースを複数投稿できるように。投稿タイプは「投稿」にチェック。
  3. カテゴリ作成
    NEWSカテゴリ、スラッグnewsを作っておきます。
  4. テスト投稿をしておく。
    02この投稿です
    ニュースは繰り返しで投稿しておきます。カテゴリはNEWSを選択

表示部分カスタマイズ

表示方法は2通りあります。

  • Aパターン the_content()をフックする。
  • Bパターン single-news.php等を作りカスタム投稿用の表示を作る。

Bパターンは、一覧で出力するためにもう一手間必要だったり、RSSの出力等でさらにもう一手間いったりするので却下。

functions.phpにフックを書く

コードは次の通り
不細工ですけどゆるして。

//投稿がカテゴリNEWSに属しているとSmartCustumFieldのnews_groupの値を出力
//the_contentをフックする。条件はカテゴリNEWSに所属しているとき
function my_the_content( $content ) {
//カテゴリNewsに所属していたら
if ( has_category( ‘news’, $post ) ) {
// スマートカスタムフィールドグループ’news-group’を取得
$news_group = SCF::get( ‘news-group’ );
//繰り返しをarrayで取得するのでその内容を$news_contentに追記していく
$news_content=””;

if($news_group !=null){
$i=0;
foreach ( $news_group as $fields ) {
$news_content.='<div class=”news_block”>’;
$news_content.='<h3 class=”news_title”>’. $fields[‘news_title’].'</h3>’;
$news_content.='<ul><li><a href=”‘.$fields[‘news_url’].'”>’.$fields[‘news_source’].'</a></li>’;
$news_content.='<li><a href=”‘.$fields[‘news_release_url’].'”>’.$fields[‘news_release_name’].'</a></li></ul>’;
$news_content.='<p>’.$fields[‘news_content’].'</p></div>’;
$i++;
}
};
//ガッチャンコ
$content.=$news_content;
}
return $content;
}
add_filter( ‘the_content’, ‘my_the_content’ );

これで表示できます。簡単。
NEWSのときにわかりやすくアイコン等表示さしたければHabakiriのアクションフック、habakiri_before_title とかでいけますね。

21

ニュース山盛り

ここ最近はニュース多かったですね。

Nintendo Switch

ゼルダのために!
サイズが微妙だなぁ

Googleが日本語Webフォント9種類を公開

Noto Sans以外に公開されました。明朝も3種類
制作が捗りますね
WordPressでの使用方法は後ほど。

Google Pixel 海外発売開始

ぬがー

ASUS ZenPadシリーズ新作発売

Nexus7 2013をそろそろ変えたいのでメぁ。モメモ。8インチがいいな

Docomo Xperia X Compact 11月上旬発売

重要なのは防水対応とメモリ3G
Docomo謹製アプリ達がメモリ喰うから。
Xperia z3 Compact ユーザなんですがタッチ切れでてきてるんです。
でもWeb制作するからにはiPhoneないと話にならないジレンマ。

19

EDEN

オールラウンダー廻 をやっと読み終えたので前作のEDEN

ハードSFです。
描写はエグい。淡々と物語るので余計怖い。
近未来を描いていますが、今・起こっている、ことも。

あらすじ
原因不明のウィルスにより人口が85%まで減った近未来。それでも人は争い、傷つき、絶望する。
マフィアの大物の子どもに生まれついた主人公エリヤの苦悩。
大きくは民族浄化、小さくはヒモの暴力。
暴力と混沌の中に希望はあるのか。

19

Kindle Paperwhite 32GB、マンガモデル

欲しいけど、通勤チャリンコの身には必要ない。
けど欲しい。
そしてちょっと高い。

高dpiなのでいいとは思うし、ページめくりも高速化されてるみたい。

 

itmedia

 

 

18

PageBuilderにコンテンツスライドイン効果を付けた

調子にのったので、コンテンツスライドイン効果を付けた!

JqueryのプラグインはFadeThis 

手順は、目次の通り。

JSの配置

子テーマなので、子テーマのディレクトリ直下にjsディレクトリを作成、http://lwiesel.github.io/jquery-fadethis/ からダウンロードしたファイルを解凍して jquery.fadethis.min.js を放り込む

 

functions.php にJS読み込みと実行を追記

headerとfooterに直書きしてもいいのですが、それもなんなのでfunctions.phpに追記


/コンテンツスライドイン実装
//wp_headに追加
function adds_head() {
echo "n".'<script type="text/javascript" src="';
echo get_stylesheet_directory_uri() . '/js/jquery.fadethis.min.js'."n";
echo '"></script>';
}
add_action('wp_head', 'adds_head');
//wp_footerに追記
function adds_footer() {
echo '<script>jQuery( function( $ ) {$(window).fadeThis({distance:500})} );</script>'."n";
}
add_action('wp_footer', 'adds_footer');

配置したrowやWidgetにクラスを記述

Attribututesでクラスを付与できるのでそこから。

slide-left

slide-right

slide-top

slide-bottom

以上でスライドイン!簡単!