タイトル通り複数のカスタムフィールドの値で投稿をソートする

デジタルドリームワークスからHigaです。

タイトル通り複数のカスタムフィールドの値で投稿をソートする方法について。
良く出てくる案件と思いますので、メモしておきます。

 

1. クエリの書き換え(ソート)について(通常のソート)

WordPressで投稿の並び替えをする際には「orderby」や「order」などクエリのパラメータを指定して変更出来ます。

例:最近の投稿をタイトル順に並べる

[php]
10, 'order'=> 'ASC', 'orderby' => 'title' );
$postslist = get_posts( $args );
foreach ( $postslist as $post ) :
setup_postdata( $post ); ?>





[/php]

※Wordpress Codexより
https://wpdocs.osdn.jp/テンプレートタグ/get_posts

 

2. クエリの書き換え(ソート)について(pre_get_postsについて)

また自分は単純にメインループのクエリをかえる場合は「pre_get_posts」のアクションフックを使用してfunction.phpに記述しちゃいます。
その方がそれぞれのテーマに記述する必要が無く、function.phpの1ファイルで管理出来るので便利です。
こんな感じになります。

[php]
is_home() && $query->is_main_query() ) {
$query->set( 'posts_per_page', 10 );
$query->set( 'order', 'ASC' );
$query->set( 'orderby', 'title' );
}
}
add_action( 'pre_get_posts', 'get_post10by_title' );
?>
[/php]

 

3. クエリの書き換え(ソート)について(1つのカスタムフィールド値でソート)

さて前置きが長くなりました。
今回複数のカスタムフィールドでソートをする場合についてです。
通常1つのカスタムフィールドでソートする場合は、以下のように簡単にできます。
しかしこれでは2つのカスタムフィールドではソート出来ませんでした。

カスタムフィールドKey:「custom_key01」でソート

[php]
is_home() && $query->is_main_query() ) {
$query->set( 'order','ASC' );
$query->set( 'orderby','meta_value_num' );
$query->set( 'meta_key','custom_key01' );
}
}
add_action( 'pre_get_posts', 'get_post_sortby_customkey' );
?>

[/php]

 

4. クエリの書き換え(ソート)について(複数のカスタムフィールド値でソート)

2つのカスタムフィールドでソートする場合は以下のように記述する必要がありました。

カスタムフィールドKey:「custom_key01」、「custom_key02」でソート

[php]
is_home() && $query->is_main_query() ) {
$query->set( 'orderby', array(
'meta_custom_key01' => 'ASC',
'meta_custom_key02' => 'ASC'
)
);
$query->set('meta_query',
array(
'meta_custom_key01' => array(
'key' => 'custom_key01',
'type'=>'DATE' //それぞれに合うタイプを指定
),
'meta_custom_key02' => array(
'key' => 'custom_key02',
'type'=>'TIME' //それぞれに合うタイプを指定
)
)
);
}
}
add_action( 'pre_get_posts', 'get_post_sortby_customkey2' );
?>
[/php]

という感じでキーを「meta_query」でキーを指定してあげると良いようです。
かなり端折ったので例では上手く動作するか不安ですが、考え方が分かればこのような感じで出来ます。

実は別件でtaxonomyでソートも行いたかったのですが、どうしても上手くいかず、時間の都合上断念。
色々と便利なWordpressですので、出来ないことはないはず…
こちらはまた検証してみます。

記事情報の誤りや、別の方法でのやり方などありましたらコメントいただけると嬉しいです!
またtaxonomyでソートについてもコメントいただけると!

EC-CUBE 商品を個別にデザインを変える方法

eccubeEC-CUBE 自分用メモ

EC-CUBEの商品を個別にデザインしたいときありますよね?
その時に簡単に個別でできる方法を記載します。ほとんど何も触る必要は無いです。

商品管理→商品追加から追加ページを開いて、

スクリーンショット-2016-05-25-18.18.15

このフリーエリアをクリックすると開くので

スクリーンショット-2016-05-25-18.18.35

この中にhtmlで画像も全部表示することが出来ます。
ただdetile.twigファイルの中に

{% if Product.freearea %}

{{ include(template_from_string(Product.freearea)) }}

{% endif %}

この表記が無いとフリーエリアが表示されないので注意しましょう!!

wordpress ループ

wordpresslogo-e1367355053944

wordpress ループの自分用メモです。

ワードプレスは簡単なPHPで動的に表示を出す事ができます。

静的なサイトだと一つ一つ自分で記事を記述しないといけませんが、動的にできるワードプレスだと追加した情報を自動で記述してくれるのでお知らせやブログなどを簡単に反映させる事ができます。

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

この記述がループに必要な記述です。
この間間の中に <?php the_content(); ?>など追加でブログの記事を持ってくる事ができます。

あと

category.php

tag.php
も同じ用に追加でカテゴリー選択したときのページ,タグ選択した時のページを作る事ができます!

あと、、、、

<?php if(is_home()||is_front_page()):?>

もしフロントページかホームページなら起こる事

<php else: ?>

それ以外

<?php endif;?>

これは分岐方法です。サイトを作ってると使う機会が多くなります!

他にも is_page() やis_single() があります。

is_pageは固定ページに使い is_singleは投稿ページに使います。

() この中にページのIDを入れる事によってそのページだけに反映させる事が出来るようになります。

ループと簡単な条件分岐を記述しましたがwordpressをいじる際に必須になるので勉強が必要!
全然わからない事が多いですががんばります!

WordPress 動的にIDを振る方法(移動ナビ用)

wordpresslogo-e1367355053944

ワードプレスのナビ作る時に学んだ事のメモです。

HTMLだけで飛ばすだけなら簡単に作れたのですがPHPに混ぜるのはすごく工夫がいりました。

例 $terms = get_terms( ‘カテゴリー’, ‘orderby=slug&exclude=123’ );

$termsにカテゴリーの値 並びスラッグを入れてみました。

ちゃんと中に値が入ってるかチェックが必要です。

print_r などをつかってちゃんと何の値が入ってるか中身をチェックしてterm_id をチェックして

自分で作ったナビにIDを貼付けましょう。

<?php  

echo ‘<div>’;
echo ‘<h2 id=”category-‘ . $term->term_id .'”>’ . $term->name . ‘( ‘. $term->count . ‘件 )’ . ‘</h2>’;
echo ‘</div>’;

?>

赤文字は全部$termの中の値から取り出して表示しています。

これで<h2 id=category-(番号)>(カテゴリーネーム)(記事数)件)</h2>が出力されます。

凄い便利です!
今回はfunction.php の方で出力してるのでPHPでの記述方のメモをしてます。。。。

 

 

Sublime Text Package

sublime_text_icon_2181

自分が最近知ったsublime text の色々な使い方のメモします。

私が使うときはCSS、PHP、HTML、JS などのコードを打ち込む事に使う事がほとんどだったのですが、

サブライムテキストには色々な使い道があるみたいです。

emmet やSass などもコンパイルしたりFTPでも使うとこができるらしい!

使うにはパッケージを入れてシステムをダウンロードしないといけないけどSublime text 一つで全部こなす事が出来そうですね!

パッケージの入れ方

スクリーンショット 2016-04-13 18.31.03

 

 

 

なにも書いてないまっさらな状態に

左上のコマンドの View→ show console を押すと

コマンド入れるコンソールが出てきます。

 

 

 

 

コンソール出てきた状態

スクリーンショット 2016-04-13 18.36.34

 

この状態で https://packagecontrol.io/installation#st2 スクリーンショット 2016-04-13 18.25.07

このURL からコードを持ってきて貼付けます。

背景色が灰色のところのコードをコピペしてEnter

上のタブでSublime text 2,3  どっちかのコードに切り替える事ができます。

バージョンを間違ったら動かなくなるので注意してください。

 

 

 

パッケージをインストールした後にMac : command+shift+p ( Windows : control+shift+p )

このコマンドでパッケージのコマンドを開く事ができます。

スクリーンショット 2016-04-13 18.41.21

 

こんな感じで出てくるので自分が使いたいパッケージを入れて行きましょう。

色々な機能があって凄く便利!!

 

 

 

WordPress マルチサイト(サブドメイン型) SSL対応を試してみる

20160411-pict01

こんにちは。
デジタルドリームワークスからHigaです。

早速ですが表題通り マルチサイトのSSL対応を確認していました。
ネット上でもWordpressのシングルドメインやサブディレクトリ型については、検索で多くがヒットしますが
マルチサイト、サブドメイン型についてはあまり確認することが出来なかったので確認してみました。

 

結論としては、問題なく対応出来ました。※テスト環境でですが…

 

サブドメイン型の場合、サブドメイン毎にSSL証明書を取得するか、サブドメインを全て1つの証明書を網羅出来るマルチドメイン、ワイルドカード証明書が必要になります。
コスト面だけを考えればマルチサイト、ディレクトリ型の方が良いですね。
しかし色々なサイト運営の形態があるので、一概には言えませんが…
2016年4月現在でもSSL証明書はかなり安くなっています。
もう少し下がるのか、GoogleのSEO的側面(SSL対応へのランキングの影響)も含めて検討&提案していきたいところですね。

個人の意見としては、SSLはセキュリティーの観点から もちろん導入するべきと思います。
しかしSEOのランキングに大きく影響するという観点だけを見るのであれば、現状ではもう少し時間がかかると感じます。
もちろんGoogleさんもSSLをランキングの指標に入れると宣言していますし、現在も加味しています。今後 徐々に大きく影響してくるのは確実ですが…
SSLはもちろんですが、それにも増して猛プッシュしている、AMPなどのスマホ対応が急務と思っています。

 

———-

 

さて、本題に戻りましてWordpress マルチサイト(サブドメイン型) SSL対応のメモです。
流れとしては、

1. サーバのSSL環境を整える
2. WordPressのSSL対応化
3. WordPressデータのSSL対応とポストデータのSSL対応
4. SSLのチェックとhttpアクセスの際の考慮

というながれでしょうか。
いくつかメモを残しておきます。

 

1. サーバのSSL環境を整える

サーバーのSSL環境についてはOSやそれぞれの環境により異なると思いますので各サーバーで適切に設定を行って下さい。

 

2. WordPressのSSL対応化

WordPressのSSL対応化についてですが、プラグインがあったりもするようですが今回はプラグインを入れずに対応しました。
ネット上で検索をすればシングルサイトについては管理画面->一般設定の項目からすぐに出来るようです。
マルチサイト(サブドメイン型)は管理画面から変更が出来ないので、データベースのデータを直接httpsに変更します。

 

3. WordPressデータのSSL対応とポストデータのSSL対応

この項目は上記の2とかぶるところですが、テーマ内に直接記述した「http://〜」はすべて「https://〜」に変更が必要です。
※プロトコル相対URLがベターみたいです。
またWordpressのポストデータなども画像等はすべて「http://〜」で記述されているので変更が必要になります。
かなり面倒な作業になります。
未確認ですがphpMyAdminなどが入っている環境であれば、SQLコマンドで一括変換など出来ると思います。
自分の場合は、SQLコマンドについて自信が無かった為、一度phpMyAdminからバックアップデータを取り、テキストエディタで一括変換。
再度データをアップする方法をとりました。それでも問題なくて出来ました。

 

4. SSLのチェックとhttpアクセスの際の考慮

どれだけ慎重に確認しても、修正漏れは出てきます。
https対応化はすべての読み込むファイルをhttps化した方が良いそうです。
chromeの場合は、httpで読み込むコンテンツがあると警告が出るので、そこら辺で読み込むデータをすべてhttps化していきます。
プラグイン周りもチェックが必要みたいです。
そして最後にhttpのアクセスをhttpsへ301リダイレクトします。
実際のコードは検索すれば出てきますので省きます。

 

 

さあ、長々と文章が続きましたがいかかでしょうか。
難しいかなと思っていた作業も案外いけました。
ただ作業量としては項目3あたりから多くなりますね。
またこちらの作業はすべてテスト環境で試した為、本番環境での作業は少し不安なところもあります。
SSL証明書はテスト用を発行していただけるところもありますので、そちらを利用して検証する方がより本番環境に近い形で検証出来るのでおススメです。

安全なWebアクセスの為、そして将来は必須となってくるであろうSSL対応についてメモでした。
内容に間違いがある場合や、簡単なやり方もあるよなどご意見などございましたらコメントいただけると幸いです。
それではよろしくお願い致します。m(_ _)m

EC-CUBE プロダクトページコード

eccube

プロダクトページで使うコードメモ

{{ Product.name }} 商品名を表示
{% for ProductCategory in Product.ProductCategories %}

{% for Category in ProductCategory.Category.path %}
<a id=”relative_category_box__relative_category–{{ ProductCategory.product_id }}_{{ loop.parent.loop.index }}_{{ Category.id }}” href=”{{ url(‘product_list’) }}?category_id={{ Category.id }}”>{{ Category.name }}</a>
{% endfor %}

{% endfor %}

上記のコードでループでカテゴリー表示です。

{% for ProductCategory in Product.ProductCategories %}

{% endfor %}

カテゴリーのループです。

{% for Category in ProductCategory.Category.path %}
<a id=”relative_category_box__relative_category–{{ ProductCategory.product_id }}_{{ loop.parent.loop.index }}_{{ Category.id }}” href=”{{ url(‘product_list’) }}?category_id={{ Category.id }}”>{{ Category.name }}</a>
{% endfor %}

カテゴリー設定したカテゴリーがある分全表示(リンク付き) WPのループでカテゴリ追加と一緒なのですが、書き方が少しかわってきます。

{{ Product.code_min }}
{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}
{% endif %}

商品登録画面で設定した 商品コードの表示 複数登録したやつも最初に登録した順から表示されます。

{% if Product.hasProductClass -%}
{% if Product.getPrice01Min is not null and Product.getPrice01Min == Product.getPrice01Max %}
通常価格:{{ Product.getPrice01IncTaxMin|number_format }}円(税込)
{% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
通常価格:{{ Product.getPrice01IncTaxMin|number_format }} ~ {{ Product.getPrice01IncTaxMax|number_format }}円(税込)
{% endif %}
{% else -%}

↓消費税

{% if Product.getPrice01Max is not null %}
通常価格:{{ Product.getPrice01IncTaxMin|number_format }}円(税込)
{% endif %}
{% endif -%}

値段表示のコードです。標準のままだとnumber_formatでは無くpriceになってます。

price は値段表示 自動で¥が入ります。

number_format 数字表示 後ろに単位を設定できる。 ※¥が表示されません。

 

自分もec-cube初心者ですが、みなさんの役にたってもらえると嬉しいです!

 

AWS EC2にFileMaker Server 12をインストール

 

aws ec2

AWSのよく使用するサービスでEC2を設定してみました。このサービスは、AWS内に仮想サーバーを設置するものでWindows server 2008 にFileMaker Server 12をインストールして、顧客のオンプレミスサーバー(ローカルサーバー)のバックアップサーバーとしてAWSに設定しました。

aws ec2

1.AWS EC2のインスタンスをWindows Server 2008で作成

2.MacからアクセスするのでMicrosoftRemoteDesktopでAWS EC2の仮想サーバー接続

3.FileMaker Server 12をインストール

4.AWS EC2のセキュリティグループにファイルメーカーのプロトコルを通過するのを設定

5.Windows Server 2008のファイヤーウォールの設定

6.クライアントのファイルメーカーからアクセスできたら、AWS EC2のインスタントを停止しました。(無駄に課金されるのを防ぐため)

今回のAWS EC2設置に参考にした、Booksです。AWSも日本語化されて比較的スムーズに作業が進みました。

aws ec2

それと、shcooの初心者・新卒エンジニアに送る!AWS入門には、大変勉強になりました。

aws ec2

AMPの下調べ (実践前)

デジタルドリームワークスからHigaです。
さてGoogleが猛プッシュ中のAMPについて下調べしました。
今後弊社のブログにも導入していきたいと思います。

AMPについての概要は以前に投稿した記事をご確認下さい。
http://blog.ddwnet.com/archives/1190.html

さてそれではAMPのコードを見ていきましょう!

20160328-pict02

上記が推奨されるampの雛形です。
HTMLのコーディングをしている方であれば、それほど難しくないですね。
しかしAMP独自の記述もありいくつか注意が必要です。

● htmlタグにはamp属性を入れましょう。
● canonical要素には通常記事のURL、もしくはAMP版ページしか無い場合は、AMPページのURLを記述します。
● viewport要素は「initial-scale=1」が望ましいようです。
● スキーマタグでセマンティックウェブへの対応
● AMP JS ライブラリーの読み込みとAMPスタイルの読み込み

という感じでしょうか。それに加えて以下も気をつけてましょう!
従来通りCSSで装飾を行っていきますが、AMPではhead内にインラインで以下の様に記述していきます。

[css]

[/css]

imgダグはAMP独自タグ(amp-img)だったりするようです。
その他、AMP独自タグがあったり、非推奨タグなどもあり、詳細はACCELERATED MOBILE PAGES PROJECTを確認してみましょう。

それでは次回 実際に記述してみたいと思います。

参考
ACCELERATED MOBILE PAGES PROJECT
https://www.ampproject.org/

20160328-pict01

EC-CUBE 値段表記メモ

eccube

EC-CUBEの初期の値段表示タグは {{ Product.getPrice02IncTaxMin|price }}となっていて、

この初期の状態だと値段は出るが¥1000(値段が1000円だとして)という表記になっている。

このタグは税金の%を管理画面の方で設定していたら税込みで表示されます。

ただ{{ Product.getPrice02IncTaxMin|price }}状態だと表記が¥1000で表記されるため人によっては、

見やすい1000円の表記に変えたいですよね!?

{{ Product.getPrice02IncTaxMin|price }}このタグの{{ Product.getPrice02IncTaxMin|price }}このpriceとかかれた部分が

値段の表示設定になっていてpriceは値段表示という設定になっています。このpriceの部分を

number_formatに書き換える事で数字表示に切り替える事が出来ます。

{{ Product.getPrice02IncTaxMin|number_format }}円 と記述することによって 1000円という表示に切り替える事ができます。