WPワークス

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

カテゴリー: カスタマイズ

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

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

テーマ「ShapeShifter」バージョン1.0.6 更新

テーマ「ShapeShifter」バージョン1.0.6 更新
変更点は以下の通りです。 ウィジェット「Slide Gallary」のエラー修正・出力調整 ウィジェット「TOC」の使用条件エラーの修正 「公開」ボタンのセーフティー機能を追加 その他テキストエリアに入力したダブルクオートなどで生じる不具合を早速確認しましたので、修正次第早急に更新する予定です。続きを読む

テーマ「ShapeShifter」バージョン1.0.5のウィジェット「Slide Gallary」に不具合

テーマ「ShapeShifter」バージョン1.0.5のウィジェット「Slide Gallary」に不具合
JSの変数名を間違えており、テキストを追加できない状態になっていました。 また、アイテムを追加するボタンも追加しようと思っています。続きを読む

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

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

テーマ「ShapeShifter」バージョン1.0.5 更新

テーマ「ShapeShifter」バージョン1.0.5 更新
最新版のテーマ「ShapeShifter」は当サイトのダウンロードリンクからダウンロード可能です。続きを読む

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

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

テーマ「ShapeShifter」バージョン1.0.5の特徴5

テーマ「ShapeShifter」バージョン1.0.5の特徴5
1つのフックに出力するオプショナルウィジェットエリアが複数のウィジェットエリアを出力した際のスタイルを調整し、PC用のナビメニューの横幅を自動でコンテンツエリアに合わせるように調節しました。続きを読む

テーマ「ShapeShifter」バージョン1.0.5の特徴4

テーマ「ShapeShifter」バージョン1.0.5の特徴4
ウィジェットの出力条件によって、コンテンツエリアのカラム数が変化するようになりました。 「is_active_sidebar」以外の方法でサイドバーの有無をチェックすることで解決しました。続きを読む

テーマ「ShapeShifter」バージョン1.0.5の特徴3

テーマ「ShapeShifter」バージョン1.0.5の特徴3
テーマカスタマイザーのフォントの選択肢に、今まで忘れていた標準フォントを追加しています。続きを読む

テーマ「ShapeShifter」バージョン1.0.5の特徴2

テーマ「ShapeShifter」バージョン1.0.5の特徴2
「Slider Pro」を使用したウィジェット「Slide Gallary」を追加し、簡単にスライダーを出力できるようにしました。「テキスト」「ダウンロード」「Youtube動画」「投稿ページ」「固定ページ」をスライドで表示できる便利なウィジェットです。続きを読む

テーマ「ShapeShifter」バージョン1.0.5の特徴1

テーマ「ShapeShifter」バージョン1.0.5の特徴1
投稿フォーマットを利用した出力設定を追加しました。ホームを含むアーカイブページの設定は「外観」->「テーマの設定」ページで行えるようにし、「新着一覧ウィジェット」には、各ウィジェットで設定を変更できます。続きを読む

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

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

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

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

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

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

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

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

コンテンツ編集を楽にするクイックタグボタンの追加・編集方法

コンテンツ編集を楽にするクイックタグボタンの追加・編集方法
ワードプレスには「メディアを追加」ボタンが標準で備わっていますが、この横にボタンを追加する方法です。メディアボタンの横に追加すれば、HTMLエディターとビジュアルエディターの両方で使うことができますから非常に便利ですよね。 そのボタンでどのような処理をするかが重要で、実はボタンを設置すること自体は非常に簡単です。つまり、PHPで書くことは殆どありません。JavaScriptがメインです。 プラグイ続きを読む

コピペでOK! 「Mobile Detect」を使ったワードプレスのウィジェット用の条件分岐表示に便利な関数

コピペでOK! 「Mobile Detect」を使ったワードプレスのウィジェット用の条件分岐表示に便利な関数
サードパーティ製のクラス「Mobile Detect」を紹介したので、実際にテーマで使用している例を紹介しようと思いました。 関連記事: 「Mobile Detect」でデバイス毎の条件分岐が簡単に! テーマ「ShapeShifter」では主にウィジェットでの分岐に使用していますので、そのコードをそのまま紹介しようと思います。「trait」を使用していますので、不要な方は外してしまいましょう。 ウ続きを読む

「Mobile Detect」でデバイス毎の条件分岐が簡単に!

「Mobile Detect」でデバイス毎の条件分岐が簡単に!
デバイスごとに処理を分岐させるのに、自分でユーザーエージェントをチェックするのは非常に面倒ですよね。スマホやタブレットなんて「新型の○○」といった新商品がどんどん出てくるでしょうし、海外のデバイスまで1人で管理しきれません。 そこで便利なのが「Mobile Detect」というサードパーティ製のクラスです。 インクルードしてメソッドを使用するだけで、端末チェックできてしまう優れものですので、ワード続きを読む

背景をスライドするjQueryプラグイン「Vegas2」が格好良い!

背景をスライドするjQueryプラグイン「Vegas2」が格好良い!
テーマ「ShapeShifter」でダウンロードリンク用のウィジェットを作成しようとし、背景だけスライドするプラグインってないかなぁと探していると、すごく格好良いjQueryプラグインが見つかりましたので実装予定です。 ヘッダーに設置したのは下にあるようなウィジェットで、スクリーンショットは背景が回転しながらフェイドインしてくるアニメーション「swirl」しているところです。 とこんな感じです。続きを読む

Googleの構造化データの標準が更新されていた。

Googleの構造化データの標準が更新されていた。
Googleの構造化データのチェックツールで、毎回「必須プロパティの欠落」と表示されては更新してきたので、僕としては「またか…」と思ったのですが、今回は構造化データの標準が記されたページが用意されるようになっていました。 ええ、恐らくですが、これで漸くテーマの構造化データの出力をGoogleの標準に合わせることができそうです。 今回はその仕様について少し紹介しようと思います。 まずは「続きを読む
メニュ
ホーム
トップへ