ホーム > Wordpress
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を選択

表示部分カスタマイズ

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

  • 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 とかでいけますね。

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

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

18

PageBuilderでパララックス効果

検索したけど出てこなかったので、備忘録。

PageBuilderでパララックス（視差効果）を使いたい場合の説明。

２ステップで簡単！

準備

まずレイアウト。レイアウトは全幅が無難。01

パララックス効果を付けるROWは縦を長めに取ったほうが視覚効果的にわかりやすいので、最低限400PXはいるかなー
スマホのこと考えると60vhとか使えるといいです。

PageBuilderで作る場合、ROWにパララックスを付けるので、その中身に高さを書いてやります。

例えばこのROWは2カラムでSiteOrijinEditerなので、SiteOrijinEditerのLayOutにPadding設定。
上下5remとかにします。

Rowにパララックス設定

このページの1.準備にパララックスの設定をします。

準備で上下パディングは付けているので、rowをeditしてやります。
02

右側メニューのDesignでBackground Image(背景)を指定、Background Image Display を Parallax に。
03

完了

以上で完了

やってみると簡単です。

書いてて思ったけどrowのLayoutで縦幅決めてもいいんちゃうと。

まぁまぁ。

ATOM　エディタ

WordPressの開発環境を探していたら、ATOMがいいらしいということで、使ってみたらめっさいい！

良い点

  • フォルダごとにウィンドウが起動
    theme編集が主なので、サイトごとにフォルダで管理してるのですが、フォルダごとにウィンドウが起動します。地味に便利。
  • RemotoSyncがいい
    Dreamweaver顔負け
  • 軽い
    起動はちょいともたつくものの起動してしまえば軽い。
  • 機能拡張が簡単
    PHPもJSもJQUERYもHTMLもCSSもパッケージで簡単

良くない点
特に思いつかないけど無理やり書く

  • Shift-jisとかが文字化け
    パッケージでなんとかなるような気もするけどなんとかする気もしない。
  • ショートカットが憶えられない
    年のせいですねハイ。

ということでとりあえず導入してから四の五の言えってレベルでいいです。

以下導入方法（Windows10）

(さらに…)

13

Page Builder

WordPressのPageBuilderはすごすぎ。

これまでテンプレートがデザインの大部分を担ってたのが、PageBuilderによって枠組みがテンプレート、ページ内はPageBuilderとほぼ完全に分離！

PageBuilderでは、ページごとに用意されたウィジェットや、他のウィジェット、もちろん文章もグリッドレイアウトでごりごり配置していくのです。

(さらに…)

  • 作成者: kanta
  • カテゴリー: Wordpress