WPワークス

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

ブログ

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

コンテンツ編集を楽にするクイックタグボタンの追加・編集方法
ワードプレスには「メディアを追加」ボタンが標準で備わっていますが、この横にボタンを追加する方法です。メディアボタンの横に追加すれば、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の標準に合わせることができそうです。 今回はその仕様について少し紹介しようと思います。 まずは「続きを読む

結合したJSコードでエラーが起こる原因と改善方法

結合したJSコードでエラーが起こる原因と改善方法
ページ速度を改善するための方法として、圧縮・縮小・キャッシュなどの方法がよく取られますが、時々それらを施すことで、コードが正常に読まれなくなる場合があります。 テーマ「Optimizer」に実装されているファイルマージの機能を使用していると、やはり時々上手くいかない場合があると感じ、原因の解明とコードエラーの修正を施してみました。 ただ、プラグインに実装されて呼び出されるコードに関してはどうしよう続きを読む

設定用ページの作成・追加方法

設定用ページの作成・追加方法
サブメニューページを作成・追加する方法の応用編です。 関連記事: 管理画面にサブメニューページの作成・追加方法 ここでは追加したサブメニューページで設定変更できるように編集する方法を紹介していきます。 サブメニューページである必要はないんですが、標準的な設定ページに仕上げるには一番良い方法だと思いました。 設定の追加方法の基本 設定の基本は「データベースに保存」と「データベースから取得」ですが、こ続きを読む

管理画面にサブメニューページの作成・追加方法

管理画面にサブメニューページの作成・追加方法
プラグインには、よく設定用のページが追加されているのを見かけるでしょうが、そういった管理画面にページを追加する方法を紹介していきます。 管理画面にページを追加することで、テーマカスタマイザー以外での設定を追加したり、ツールを設置することが出来るようになります。テーマの設定は、テーマカスタマイザーでも設定できますが、別に外観を気にしてライブプレビューで見る必要もないどころか、態々重いテーマカスタマイ続きを読む

ウィジェットアイテムの作成・追加方法

ウィジェットアイテムの作成・追加方法
ウィジェットアイテムは、マウスでカチカチと操作するだけで簡単に配置できるアイテムですので、テーマやプラグインに実装することで、任意のウィジェットエリアに自由に配置することが出来ます。テンプレートファイルに直接HTMLを書くよりは柔軟に表示を切り替えられ、非常に便利ですよね。 自分好みのウィジェットアイテムを作成できたら良いなと思ったことがあるなら、ちょっと下に紹介していますので一度挑戦してみてくだ続きを読む

ショートコードの作成・追加方法

ショートコードの作成・追加方法
非常に便利なワードプレスのショートコードですが、自分のオリジナルショートコードや編集が簡単にできるのをご存知でしょうか? ショートコードを自動で挿入してくれるプラグインも多く存在し、「Shortcodes Ultimate」といった非常に便利なプラグインも存在しますが、自分である程度自由に作成できるようになっておくと更に柔軟かつ効率の良いコンテンツ作成が可能になります。 ここではそんなワードプレス続きを読む

テーマカスタマイザーの編集方法

テーマカスタマイザーの編集方法
WordPressのテーマカスタマイザー、「外観」->「カスタマイズ」のページでは、主にテーマのスタイルをライブプレビュー(JavaScriptを書く必要あり)で確認しながら編集できます。 ここでは基本的なテーマカスタマイザーの編集方法を紹介していきます。 テーマカスタマイザーを作成 テーマカスタマイザーの作成方法ですが、テーマカスタマイザー用の関数を「customize_register」にフッ続きを読む

追加したダッシュボードウィジェットを強制的に一番上に表示させる方法

追加したダッシュボードウィジェットを強制的に一番上に表示させる方法
ダッシュボードウィジェットでは、使い方がわからない時の「ヘルプ」なども載せられますから、テーマにダッシュボードウィジェットを追加する際には、一番上に表示させたい時も少なくない筈です。 そして、実は「ダッシュボードウィジェット API – WordPress Codex 日本語版」にダッシュボードウィジェットを一番上に表示させる方法が載っているのですが、それとはちょっと異なる簡単な方法を続きを読む

ダッシュボードウィジェットの作成・追加方法

ダッシュボードウィジェットの作成・追加方法
あまり使わないかもしれませんが、ダッシュボードウィジェットはテーマやプラグインの基本的な案内など、簡単にまとめた情報を表示するのに非常に便利ですので、ダッシュボードウィジェットの作成方法を紹介しています。 恐らく思っている以上に簡単に作成することが出来ますので、初心者でも挑戦してみてください。 基本的なウィジェットの追加 必要な関数は2つのみです。 1つはWordpress関数「wp_add_da続きを読む

テーマカスタマイザーでの「option」と「theme_mod」の使い分け

テーマカスタマイザーでの「option」と「theme_mod」の使い分け
テーマカスタマイザーの項目を追加していく際、「add_setting」の「type」の値を指定することが出来ますが、どっちにしたら良いか悩んだことはありませんか? こういうやつです。 僕も最初「どう違うの?」といった感覚で、使い分ける意味が分かりませんでしたが、テーマやプラグインを作成している内に分かったこともありますので、どう使い続きを読む

無料で高解像度の画像を探せるサイト「Stock Up」! その殆どが驚きの「CC0」!

無料で高解像度の画像を探せるサイト「Stock Up」! その殆どが驚きの「CC0」!
WordPressブログやサイトに限らず、ロゴ画像を一新するだけで印象が随分異なって見えますよね。 ただ、画像を無料でダウンロードするにも、クレジットの表示義務があるなど何かしらの制限が付き纏うことが少なくありません。そうなると自分のブログやサイトを画像でイメチェンするにも、悩んでしまいませんか? 「CC0の高画質な画像」をダウンロードできる「Stock Up」という画像検索サイトがあるのですが、続きを読む

ワードプレスのブログやサイトを高速化するCSS・JSファイルを結合する方法

ワードプレスのブログやサイトを高速化するCSS・JSファイルを結合する方法
予めコードを保存しておき、1コールで呼び出せるようにしておくことで、ページの速度がずいぶん改善されましたので、その方法を紹介しておこうと思います。当ブログでも使用中の「Optimizer」で使用されている方法です。 コピペで出来るようにするつもりですが、管理画面と公開ページ側での処理を分離することが目的ですので、テーマなどもある程度分離できている必要があります。このテーマ「Optimizer」でも続きを読む

条件分岐できる便利なカスタムテキストウィジェットの作り方

条件分岐できる便利なカスタムテキストウィジェットの作り方
WordPressが標準で用意しているテキストウィジェットは非常に便利ですが、表示ページを自在に設定できた方が良いと思いますので、簡単に作成できるオリジナルテキストウィジェットの追加コードを紹介します。 デバイスごとの条件分岐には、Wordpress関数「wp_is_mobile」でも可能ですが、タブレットなどの条件も入れることを検討し、外部ソースの「Mobile Detect」を使って作成します続きを読む
メニュ
ホーム
トップへ