WordPress 子テーマが便利

wordpresslogo-e1367355053944

ワードプレスの子テーマのメモ

ワードプレスの子テーマを使うと便利な理由は、親テーマのアップデートが来ても書き換えられる事がない!
そして、必要な箇所のphpだけ持ってきて修正する事が出来るから凄く便利!!!

使うのもすっごく簡単デス!

themeの中に ”名前_child“でファイルを作ってその中にstyle.css と function.php を追加するだけ!
主に必要なファイルがこの二つで style.cssには

テーマ

これを記述するだけです。

function.phpに記述するのは

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);
}
?>

これを記述するだけです。

後は自分の直したい箇所のphpを子テーマの中に入れて編集すればそれが優先的に読み込まれて行きます。。。。。

 

Slickっていうjsプラグインが便利!

slick.js

jsのプラグインでslick.jsっていうのがあってこのプラグインはスライド用のjs用なのですが設定が凄く簡単でぱぱっとサイトで使う事ができるのですご〜〜〜〜〜っく便利です。
使い方も簡単です。

プラグインページ

このページからjsファイルをダウンロードしてきます。

あとはjsファイルを読み込ませるだけで準備が完了します。

$(‘クラスの名前‘).slick();これが一般の使い方で写真一枚が切り替わって行きます。

↑のjsを<script></script>の中に追加で使えます。

htmlの準備も簡単で

<div class=”クラスの名前“>
<div>画像</div>

<div>画像</div>

<div>画像</div>

<div>画像</div>

</div>

slickの一個コンテンツ見せ

これが標準の使い方で追加設定をする事で色々変化を加える事が出来ます!

コンテンツを3個づつ見せたりと変更を加える事が出来ます。

簡単に機能を追加出来ていろいろと変化を加える事が出来るのでかなりオススメです!

 

Cake.php レイアウト変更についてのメモ

20150511180945

cake.php の自分用メモです。

cake.phpは動かす為に3このフォルダを触らないと動かない。

View:サイトの主なレイアウトを作成するファイル

Controller:プログラムに指示するファイル

Model:このファイルにプログラムで起きた時のエラー処理記述!?

Webroot:css、js、imgを詰め込む

cake.phpもwordpressのようにphpで書かなければほとんどプログラム処理する事が出来ない。

※controllerの中に指示をかかないと表示すらされない事がある。

メール使う為にはメールの設定をしないと使えない

使う為にはconfigファイルのemail.phpで設定する

controllerのファイルにプログラムの指示、viewでもメールの内容の記述も必要になります。

cake.php はメールの設定やフォームの値を返したりとなれたら簡単に作れるので便利らしい。

でも意外と設定が多く、なれるまでに時間が掛かりそうです!!

なれるまでにかなり時間かかりそうですが、扱える等になるとお問い合わせページなど作るのにかなり良さそうです。

AFFINITY DESIGNERを使ってみた!

アフィニティデザイナー

画像編集ソフトは何を使っていますか??

Photo shop やillustratorは使ってる人が多いと思いますが、AFFINITY DESIGNER が最近グイグイ来てます!

adobe製品とは違い一回買ってしまえばどんどんアップデートされて機能がどんどん増えて行ってます。

結構色んな拡張子に変更出来て結構いい感じです!

このAFFINITY DESIGNERはillustratorに凄く近い機能をもってて

AFFINITY DESIGNERとは対になってるAFFINITY PHOTOってアプリもあります。

AFFINITY PHOTOはPhoto shopにすごく近い性能を持ってます。

何と言っても月額でずっと払うのとは違うのでいい感じかなと思います。

AFFINITY DESIGNERの中はというと、、、

スクリーンショット 2016-07-27 18.06.55

中身は凄くillustratorに似ている!?

私も始めたばかりでそこまで機能をちゃんと見てないのですが少し触った感じだと少しの作業ならAFFINITY DESIGNERで行けそうな感じがします。

どんどん使い方を勉強していこうと思います。

EC-CUBE3系 on Plesk! Plesk搭載サーバーでEC-CUBE3系を動かしてみる!

20160628-pict01

デジタルドリームワークスから比嘉です。
今回はPleskが搭載されているサーバーへのEC-CUBEのインストールを行ってみました。
composerを利用したインストールもあるようですが、まだ深く理解出来ていないので今回はファイルをアップしてインストールを行いました。

さて、本題です。
Pleskは標準で搭載されているPHPのバージョンが低いため色々と大変です。
こちらの環境では以下のような作業を踏んでとりあえずインストールまでこぎつけました。

1. Pleskへ新しいバージョンのPHPをインストール
2. FastCGIによるセッションパスの変更
3. PDOモジュールを利用可能に設定
4. PHP タイムゾーンの修正

1. Pleskへ新しいバージョンのPHPをインストール

Plesk搭載サーバーはサーバー管理がとても便利でサイト運営しやすいのですが、その分自由度が落ちる部分もあります。
とくにネックとなるのがPHPのバージョンです。
標準のPHPバージョンが低いため動かないシステムもあります。
自力でPHPをバージョンアップするとPleskがエラーを起こすなど難しい部分がありました。
しかしPleskのバージョンも上がり、環境によってはPHPの高いバージョンがインストール出来たり、複数のPHPバージョンを入れることが出来る様になっているみたいです。
今回試してみた環境は、後者の複数のPHPバージョンのインストールが提供されていました。
Pleskバージョンにより違いはあると思いますが、以下の方法でEC-CUBEが動作するバージョンをインストール。

※ 参照 https://kb.plesk.com/jp/125146

色々と記述されていますが、やったことは
サーバー管理「ツールと設定」->Plesk項目「アップデートおよびアップグレード」->「コンポーネントを追加/削除」->「ウェブホスティング機能」よりEC-CUBEの動くバージョンのPHPをインストールするだけです。

これでホスティング設定よりPHPのバージョンを選択出来る様になります。
ただしインストールしたPHPはFastCGIでしか動作しません。
ここからが試行錯誤の始まりでした。

2. FastCGIによるセッションパスの変更

PHPのバージョンもクリアしたので早速EC-CUBE3系をサーバーへアップ、アクセス権を変更してインストール画面にアクセスします。
するとセッションディレクトリが書き込み&読み込み出来ませんとエラーが出ます。

RuntimeException in NativeFileSessionHandler.php line 52:
Session Storage was not able to create directory “/var/lib/php/session”

これはPHPをFastCGIで実行しているため、実行権限がFTPユーザーになるのが理由のようです。
そこでセッションのパス(session.save_path)を変更します。

まずセッションのディレクトリを作成

mkdir /var/www/vhost/domain.tld/private/php_sess
chown [ftpuser]:psacln /var/www/vhost/domain.tld/private/php_sess
chmod 0700 /var/www/vhost/domain.tld/private/php_sess

※ 参照 https://kb.plesk.com/jp/7056

次にセッションパスの変更

通常はphp.iniを修正しても良いのですが、複数ドメイン管理しているので、Plesk上のPHP設定から「session.save_path」を変更します。
apacheを再起動します。

3. PDOモジュールを利用可能に設定

さてセッションの問題もどうにか解決し、インストールステップを踏めるようになりました。
早速ステップを進めていきます。ところがSTEP3でストップ orz.
エラーの文章を読む感じではPDO部分でエラーが発生している様子でした。
そこでphp.iniを確認し、PDOモジュールを読み込み出来る様に設定します。
こちらもPlesk上で行えそうでしたが、他のドメインでも拡張しても問題ないと判断しphp.iniを修正

;extension=php_pdo.dll

extension=php_pdo.dll

apacheを再起動して再度アクセスすると、すぐにSTEP3が表示されてステップが進めません。
どうもインストール時のキャッシュがどこかで保存されている模様です。
これがどうもよく分からず、今回は再度ファイルをアップし直して、最初からインストール手順を進めました。

4 PHP タイムゾーンの修正

さー、これで大丈夫かと思ったのですが、どうも最後のステップ5で動作が強制的に終了して真っ白な画面になります。
エラーログを見る感じ、FastCGIのリクエストが多いことが原因と思いましたが…
最終的には根本的な問題、タイムゾーンを修正していんトール完了!

date.timezone = Asia/Tokyo

20160628-pict02

さてー、記述してしまえばそこまで長い道のりではないですが試行錯誤をしたため数日を要しました。
管理画面へのログインやフロントページ等、特に問題は無さそうですがここまでの道のりを見ると、本番環境で利用するにはもう少し様子を見た方が良さそうです。
間違えている情報やこんなやると簡単など、情報があればぜひコメントをいただけると幸いです。
よろしくお願い致します。

またサーバーの環境により同じやり方でも上手くいかなかったり、設定変更によりサーバー全体に影響を及ぼしたりします。
みなさんバックアップ等、もしくは設定を元に戻せる状態の準備をして、自己責任で慎重に作業を行いましょう。
EC-CUBE3の情報がまだまだ少ないですが、問題解決の糸口になれば…

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

デジタルドリームワークスから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でソートについてもコメントいただけると!

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での記述方のメモをしてます。。。。

 

 

Woocommerce メモ

WoocommerceのSingle-product.php の中身の変更。

フォルダ内部のhookを確認して、do_action()の中身を調べて
その関連してるファイルを書き換えて行く事で自分の見た目を効かせたレイアウトを作る事が出来ます。

結構な数のファイルに分かれてますが
色々な部分を簡単に変更できるようにかも??

時間がある時に一枚で出来る用に作ってみようと思います。

woo

WooCommerce 支払い方法 追加(その2)

WooCommerce 支払い方法 追加(その2)

さて、「WooCommerce 支払い方法 追加(その1)」の続編です。
前回のプラグイン構造では複数の支払い方法追加がある場合は、支払い方法 毎にプラグインを作成、有効化していかないといけませんでした。
かなり非効率ですし、プラグイン数が多くなるのは好きじゃないので、今回はその部分の改良版のメモとなります。
前回作成した支払い方法追加のクラスはほぼそのまま使えます。

構造は以下のようなイメージになります。

20151127-pict01

woocommerce-higa-pack(フォルダ)
-woocommerce-higa-pack.php
-i18n(フォルダ)
–languages(フォルダ)
-includes(フォルダ)
–class-wc-dependencies.php
–gateways(フォルダ)
—class-wc-gateway-basic-bank-transfer.php
—class-wc-gateway-store.php

ファイル構造はWooCommerce本体を参考にしました。
いくつかのコードをメモ…

20151127-pict02

プラグインメインファイル
woocommerce-higa-pack.php

● 依存関係に対応

WooCommerceの拡張プラグイン 「woocommerce-gateway-amazon-payments-advanced」よりclass-wc-dependencies.phpを丸ごともってきました。
このプラグインはWooCommerceが無いと意味がないプラグインです。上記ファイルを利用する事でWooCommerceの有無をチェック出来ます。

function is_woocommerce_active() {

}

※ 無い場合は注意文章を管理画面内に表示
function wc_higa_pack_notice() {

}

● 複数支払い方法を追加

メインのプラグインファイルから支払い方法追加の部分を切り離して保存することで複数の支払い方法クラスを読み込みします。

private function _includes() {
include_once( plugin_dir_path( __FILE__ ) . ‘includes/gateways/class-wc-gateway-store.php’ );
include_once( plugin_dir_path( __FILE__ ) . ‘includes/gateways/class-wc-gateway-basic-bank-transfer.php’ );
}

各支払い方法のクラスファイル

切り離した支払い方法のクラスファイルは前回のものに少し手を加えるだけで流用出来ました。

1. アクションフックの削除とその関数を外す

削除
add_action( ‘plugins_loaded’, ‘your_payment_function);

関数からクラス部分を取り出して残す
class WC_Gateway_Basic_Bank_Transfer_Higa_Pack extends WC_Payment_Gateway {

}

2. 言語ファイル 指定部分はプラグインメインファイルで指定しているので削除

という感じです。
少し説明が難しく、長くなりましたが、とりあえず支払い方法追加の検証は終了…
どうにかなりそうです。

コードについて、間違っているところや別の方法などがあるという方は、ぜひコメントいただければと思います。

PS:今回でオブジェクト指向の勉強が必要と感じました。 汗… 再勉強中!!!

WooCommerce 支払い方法 追加(その1)

デジタルドリームワークスから比嘉です。
先日に前置きで投稿しましたWooCommerce 支払い方法の追加について、プラグインを作る形で支払い方法を追加する必要があると説明しました。
それではさっそくプラグインを作成していきます。

プラグイン作成の作法はWordpress Codexを確認して下さい。
https://wpdocs.osdn.jp/プラグインの作成

またWooCommerceの支払い方法の追加についての詳細は公式ドキュメントから確認出来ます。
https://docs.woothemes.com/document/payment-gateway-api/

それでは実際に作成したコードが以下となります。
公式ドキュメントといくつかのプラグインを参考にさせていただきました!

※コードが画像のため見えにくいです。拡大して確認下さい。

blog-151113-pict01

さていくつかコードのメモを…

● 17行目 プラグインのアクション

公式ドキュメントを参考にプラグインが読み込まれたら、クラスを実行するコードを記述。

add_action( ‘plugins_loaded’, ‘init_your_gateway_class’);

ーーーーー

● 26行目〜48行目 コンストラクタ

クラスからオブジェクト作成れた際に自動で実行される部分です。
WooCommerceに必要な変数やメソッドが記述されています。

init_form_fields();
※支払い方法の設定ページで設定する項目が定義されています。

$this->init_settings();
※設定を読み込み

add_action( ‘woocommerce_update_options_payment_gateways_’ . $this->id, array( $this, ‘process_admin_options’ ) );
※支払い方法の設定を更新した際に保存する処理

add_action( ‘woocommerce_thankyou_basicbanktransfer’, array( $this, ‘thankyou_page’ ) );
※注文完了ページで支払い方法別の文章を追加

add_action( ‘woocommerce_email_before_order_table’, array( $this, ‘email_instructions’ ), 10, 3 );
※注文が完了した後に送信されるメールにも支払い方法別の文章を追加

と続きます。

また

ーーーーー

● 111行目〜129行目 注文処理の関連

注文が合った場合のプロセス状態を設定したり、在庫更新、カートを空にしたりする処理。

ーーーーー

● 133行目〜138行目 支払い方法の登録

そして最後にWooCommerceへ支払い方法の登録を行います。

以上が大まかな解説!?メモです。

終わりに…

今回のコードでは1つのプラグインで1つの支払い方法しか追加出来ていません。
2つ、3つとある場合はプラグインを増やしていかなくてはいけないですね。(なんて非効率的…)
またWooCommerceがインストールされていない状況での処理なども記述していません。
そこらへんを改良する必要がありますね。
とりあえずベースのコードは出来ましたので次回より改良していきたいと思います。

またこのコード間違っているよ。
別の方法やコードの記述例などがあればぜひコメントいただきたいです。
よろしくお願い致します。 m(_ _)m