WPワークス

ダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。

ブログ

全てのウィジェットにプロパティを追加するフック

全てのウィジェットにプロパティを追加するフック
最近プラグイン「Bogo」に学んで、テーマ「ShapeShifter」でもウィジェットの出力条件を指定するプロパティを全てのウィジェットに設置したのですが、その方法について紹介します。 プロパティがある程度汎用的なことに限られるとは思いますが、非常に便利なフックで、ウィジェットの背景などにも使用できます。ただ、全てのウィジェットに追加する項目ですので、汎用性の高いプロパティを選ぶべきでしょう。 個続きを読む

コンテンツページにおけるカスタムフィールド・メタボックス実装と使用方法を紹介

コンテンツページにおけるカスタムフィールド・メタボックス実装と使用方法を紹介
ワードプレスサイトで各ページの差別化を行う場合、テンプレートファイルを子テーマなどに実装することが多いと思います。カラム数やデザインを変化させるのも、HTMLの知識とワードプレスのタグを使用することで編集できてしまいますから便利ですよね。 ただ、SEO関連のプラグインでも使用されるようなメタタグの出力設定など、デザイン以外でも各ページにおける差別化を行う際は、テンプレートファイルだけでは不十分なこ続きを読む

ワードプレスサイトの多言語化プラグイン「Bogo」が便利過ぎ!

ワードプレスサイトの多言語化プラグイン「Bogo」が便利過ぎ!
日本語のみでやろうと最初は思っていたので忘れていたのですが、テーマ内のダッシュボードウィジェットなどに貼った説明ページへのリンクがあり、「そういえば全て日本語だった」と思い出して焦りました。 そこで以前から名前は知っていたのですが、多言語化プラグイン「Bogo」を今まで使用したことがなかったので、説明ページだけでも多言語化すべきかと悩み、どんなプラグインなのかインストールしてみたんですが、想像以上続きを読む

タグアーカイブページで起こったワードプレス関数「get_posts」の不具合について

タグアーカイブページで起こったワードプレス関数「get_posts」の不具合について
テーマ「ShapeShifter」のバージョン1.0.15の更新情報にも書き込みましたが、クエリエラーの不具合についてです。 ワードプレスには投稿リストを取得する「get_posts」という便利な関数が用意されているのですが、とある条件下で使用すると原因不明の不具合が起こることに気付き、自分ではよくわからなかったので、ワードプレスのフォーラムにも書き込んでみました。 回答待ちしているんですが、ここ続きを読む

ワードプレスのユーザー(作者)のスラッグについて

ワードプレスのユーザー(作者)のスラッグについて
ワードプレスでユーザースラッグの設定をしたことがない人ってどれくらいいますか? ちょっと今更な疑問なんですが、そういえば「ユーザースラッグ」について書いたことはなかった気がします。 そもそも「ユーザースラッグって何だ?」と疑問に思う人もいるかもしれませんが、ワードプレスで投稿ページを作成したり、まぁつまりブログを書く人って結構いると思います。このサイトもこのようにブログを書いていますから。 でも、続きを読む

ダウンロード時に注意! 「Modernizr」のエラーが起こる原因。

ダウンロード時に注意! 「Modernizr」のエラーが起こる原因。
CSSアニメーションを追加したのですが、ブラウザのチェックのために「Modernizr」を導入することに決めたのですが、中々上手く行かず「なんでやねん!」と嘆いていました。 というのは、ダウンロードしたJSファイルをインクルードしただけなのに、「Modernizr」が定義されていない(Uncaught ReferenceError: ‘Modernizr’ is not d続きを読む

スクロールして徐々にテキストを表示する方法

スクロールして徐々にテキストを表示する方法
テーマ「ShapeShifter」バージョン1.0.9で取り入れたCSSアニメーションの実装方法についてです。 まぁ通常必要ない機能だとは僕自身思ったんですが、敢えて非表示にして、スクロールすると見えるようにすると、 僕はCSSアニメーションにサードパーティ製の「Animate CSS」を使用していますが、その他のCSSアニメーションをお持ちであれば、それで問題ありません。 サンプルは現在このペー続きを読む

jQueryプラグイン「Slider Pro」がめちゃ便利! 特徴、使い方、使用例まで紹介します!

jQueryプラグイン「Slider Pro」がめちゃ便利! 特徴、使い方、使用例まで紹介します!
テーマ「ShapeShifter」で使用できるウィジェット「Slide Gallary」で使用している無料のjQueryプラグイン「Slider Pro」を紹介します。 以前、背景をスライドさせるjQueryプラグイン「Vegas」を紹介しましたが、こちらは指定した要素をスライドさせることが出来、特徴が大きく異なります。 当サイトの「フロントページ」にもサンプルとして表示させています。「Slide続きを読む

テーマカスタマイザー用クラス「Alpha Color Picker」が便利過ぎ!

テーマカスタマイザー用クラス「Alpha Color Picker」が便利過ぎ!
テーマカスタマイザーで、ワードプレスに標準的に備わっている「WP_Customize_Color_Control」クラスという配色設定するためのクラスがあるんですが、調べてみると、これを継承した「Alpha Color Picker」なる無料のサードパーティ製クラスが存在していました。 ええ、アルファ値を所有する色のプロパティ値「RGBA」を設定することが出来るんです。 アルファ値は一番下のスライ続きを読む

ワードプレスのページ速度を改善する方法

ワードプレスのページ速度を改善する方法
ページのロードに時間が掛かるページってイライラしますよね。 僕自身実際にテーマを作成するまでどうやって改善できるか悩んでいましたし、大抵画像ファイルだったり、サーバーの設定で何とかするもんだと思っていましたが、自分でテーマを作成してみると、限度はありますが「PageSpeed Insights」のスコアでもグリーンスコアを叩き出せるテーマを作成できました。 当サイトの現在のページ速度がちょっと気に続きを読む

コピペOK! 「公開」ボタンの有効・無効を切り替えるセーフティーの設置方法

コピペOK! 「公開」ボタンの有効・無効を切り替えるセーフティーの設置方法
「間違えて記事を公開してしまった」なんてことありませんか? 僕はいつも「下書きとして保存」ボタンと間違えて、青く目立つ「公開」ボタンを押してしまいそうで不安なんですが、そろそろそんな不安ともおさらばしようと、テーマ「ShapeShifter」の次のバージョンでは、「公開」ボタンを無効にするセーフティーを設置しました。 「すぐに公開する」の下に設置されている「チェックボックス」と「公開」ボタンが無効続きを読む

ウィジェット自体の出力条件を含め、ウィジェットエリアがウィジェットを出力するか判別する方法

ウィジェット自体の出力条件を含め、ウィジェットエリアがウィジェットを出力するか判別する方法
ウィジェットエリアが出力するアイテムがあるかどうかって、どうチェックしていますか? 通常は恐らく「is_active_sidebar」を使用すると思うんですが、条件付きでコンテンツを出力するウィジェットを使ってみると、この関数が役に立たないことが分かると思います。 そこで自分なりに改良して、便利な方法を見つけましたので紹介しておきます。 何故「is_active_sidebar」では不十分なのか続きを読む

ウィジェット配置時にウィジェットのIDナンバーをJavaScriptで使用する方法

ウィジェット配置時にウィジェットのIDナンバーをJavaScriptで使用する方法
ウィジェットをウィジェットエリアにドラッグなどして追加した時、ウィジェットのメソッド「form」で出力される部分のIDってどうなっているか知っていますか? 僕も最近まで「$this->id」で取得できるものだと思い込んでいたんですが、実際は少し異なるものでびっくりしたんです。 そもそも何故こんなことをしているのかですが、フォーム内でJavaScriptの変数名にIDナンバーを使用し、その変数にJS続きを読む

テーマカスタマイザーのライブプレビューをループ処理する方法

テーマカスタマイザーのライブプレビューをループ処理する方法
テーマカスタマイザーのライブプレビューって、JSファイルの編集って面倒じゃないですか。各設定項目毎に「wp.customize( ‘setting_id’…」と書いて、設定項目を追加すればするだけ、テキスト量がどんどん膨らんでしまいます。 でも単純なCSSプロパティ変更程度なら、簡単にループ処理できてしまうんです。 テーマカスタマイザー用のクラス「 Nora_T続きを読む

テーマ「ShapeShifter」をプラグイン「WooCommerce」に対応させてみる。

テーマ「ShapeShifter」をプラグイン「WooCommerce」に対応させてみる。
ワードプレスの代表的なプラグイン「bbPress」と「WooCommerce」にテーマ「ShapeShifter」を対応させたいと思い、現在アップデートに向けてカスタマイズ中なので、ちょっと基本的な方法を紹介していこうと思います。 プラグイン「bbPress」は使ったことがあるんですが、「WooCommerce」はECサイトを構築するためのプラグインですので、本格的に商売する意図が無い場合はなかな続きを読む

テーマ「ShapeShifter」をプラグイン「bbPress」に対応させてみる。

テーマ「ShapeShifter」をプラグイン「bbPress」に対応させてみる。
ワードプレスの代表的なプラグイン「bbPress」にテーマ「ShapeShifter」を対応させたいと思い、現在アップデートに向けてカスタマイズ中で、ちょっと基本的な方法を紹介していこうと思います。 プラグイン「bbPress」は使ったことがありますから、少し勝手が分かっている分簡単でした。 このプラグインでは、基本的にワードプレス関数「the_content()」で生成されたフォーラムを出力しま続きを読む

ワードプレスのテーマやプラグインを翻訳ファイル編集ソフト「Poedit」でローカライズ(翻訳)する方法

ワードプレスのテーマやプラグインを翻訳ファイル編集ソフト「Poedit」でローカライズ(翻訳)する方法
今までは日本語のみだったんですが、英語から各言語に翻訳表示できるようにしました。漸くテーマ「ShapeShifter」の翻訳が終わりました。「バージョン1.0.3」が翻訳済みです。 日本語で見ると日本語表記が若干変化していると思いますが、実質何も変化していません。完全に公式リポジトリ用です。 僕自身最初は日本語でのみ配布するつもりでしたが、後からローカライズ対応にしようと編集すると実際かなり面倒で続きを読む

テーマカスタマイザーの設定項目を2つ以上使用するライブプレビュー編集

テーマカスタマイザーの設定項目を2つ以上使用するライブプレビュー編集
毎回更新したい人には無関係の話ですが、簡単なスタイル修正程度ならjQUeryで簡単に編集できますし、何よりライブプレビューの方が素早く仕上がりを確認できます。 ただ、最近まで僕も編集するのを忘れていたんですが、テーマカスタマイザーの設定によってはちょっと複雑なライブプレビューが必要な場合がありますよね。「〜〜モードはこういう処理」といった感じで、テーマカスタマイザーの別の設定項目によって、処理の仕続きを読む

テーマカスタマイザーでの編集をライブプレビューする方法

テーマカスタマイザーでの編集をライブプレビューする方法
テーマカスタマイザーでの標準設定では、設定項目の値を変更する度にプレビューが更新され、確認するのに時間差を覚え、ちょっと煩わしさを感じるんじゃないでしょうか? 以前テーマカスタマイザーの編集方法でも少し紹介したんですが、ワードプレスのテーマカスタマイザーには画面を更新することなくライブプレビューする方法が用意されていますので、公式の参照ページにも載っていると思いますが、テーマやプラグインに実装する続きを読む

ダウンロード可能! 簡単にテーマカスタマイザーを扱えるクラスを作成しました。

ダウンロード可能! 簡単にテーマカスタマイザーを扱えるクラスを作成しました。
ワードプレスのテーマカスタマイザーに設定項目を追加するのって結構面倒ですよね。 必要最低限の単純な設定の追加だと、 「パネル(オプション)」「セクション」「設定」を追加 「スタイルの出力」など設定を取得して編集 「ライブプレビュー」の設定(オプション) といった編集が必要になり、設定1つ1つを編集するのは、設定項目が増えてくると非常に面倒だと感じていました。 そこでスタイル用のテーマカスタマイザー続きを読む
メニュ
ホーム
トップへ