VuePress入門 | NxWorld
静的サイトジェネレータ「VuePress」の導入からデフォルトテーマの簡単な設定までを紹介します。 Node.jsがインストール済みで少しコマンドが入力できさえすれば、Vueの知識がなくてもそれっぽいドキュメントがすぐ作れるような形で紹介しているので、興味ある方は試してみてください。 Node.js（Ver 8以上）が必要になるので、使っている覚えのない方や使用しているバージョンが古い方は、Node.jsをインストールまたはアップデートをしてください。 コマンドで$ node -vを入力すれば、インストールの有無やバージョン確認ができます。 「Getting Started」ではYarnとnpmそれぞれのコマンドで紹介しますが、それ以降は基本的にYarnを用いた形で紹介しているので、npmを利用している場合は置き換えてください。 紹介している内容は、VuePress Ver 0.14.8を
VS Code：WordPress構築時に便利な拡張機能まとめ - NxWorld
絶対に入れておくべきとまではいきませんが、入力補完やドキュメント参照が容易にできるなど慣れると手放せなくなるようなものもいくつかあるので、VS Codeを利用していて普段からWordPressを触る機会が多い人は試してみてください。 WordPress Toolbox WordPressの関数・クラス・定数を入力補完してくれる拡張機能で、現時点の最新版であるVer 4.9.8にも対応しています。 展開時には引数付きで出力してくれる機能もあり、展開したコード内にある引数の選択部分をtabまたはshift + tabで移動させることもできます。 例）add_filter()を引数表示有りで展開 add_filter( $tag:string, $function_to_add:callable, $priority:integer, $accepted_args:integer )
WordPress：カスタムフィールドの値で改行入力した際、そのまま表示したり任意のタグで括って表示する方法 - NxWorld
WordPressでカスタムフィールドの値入力欄で改行入力した際、単純に表示させるだけでは改行は反映されずに表示されます。 それをしっかり改行も反映させて表示させたり、改行された各行を任意のタグで括ってから表示させたりする方法です。 紹介している内容は下の入力イメージのように入力欄がテキストエリアの場合で説明しています。 ここではいずれもget_post_meta( $post_id, $key, $single );を利用する形で紹介します。 また、エスケープしたり値有無のチェックを行うなどの記述は省いているので、その辺は必要に応じて追記してください。 単純に表示する 例としてキーがfooだった場合、表示する方法としてよく見るひとつが下記のような記述になります。 この方法で表示しようとした場合、例えば上に合った入力イメージのようにカスタムフィールド入力欄で「あいうえお（改行）かきくけこ（
Flexboxについて勉強したい・理解を深めたいときに参考になるエントリーやサイトまとめ - NxWorld
特に自分がそのように思っていたのですが、Flexboxはレイアウトを組む際に非常に便利なものではあるのですが、非対応のブラウザをサポートする必要があるために安易に使用できなかったり、仕様がころころ変わって対応してたとしてもブラウザによって様々な書き方をする必要があったりで、本格的に使うのはまだしばらく先にとかもう少し様子を見ようと思ってた人も少なくないと思います。 ただ、最近では以前に比べて記述する内容も減り、対応していなかったブラウザもサポートを切る機会が多くなったりと今後ますます利用する場面が増えそうなので、先述したようにFlexboxについて勉強したい方やより理解を深めたいという時に参考になると思うエントリーやサイトをまとめてみました。 全体的に英語のエントリーなどが少し目立ちますが、Google翻訳などを使えば大体の内容は理解できると思います。 November 16, 2017
テキスト周りのスタイリングに使えるCSSプロパティやスニペット - NxWorld
スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川（@maepon）さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク
WordPress：投稿画面でカテゴリー選択部分にフィルタ機能を実装する方法 - NxWorld
WordPressで記事投稿や編集時にカテゴリー選択する際、大量のカテゴリーが登録されている場合はスクロールを沢山して目的のカテゴリーを見つけるのが少し手間になります。 その手間を少しでも減らしたいという時に使えそうなカスタマイズで、カテゴリー選択部分にフィルタ機能を追加して目的のカテゴリーを簡単に見つけられるようにする方法です。 画像はデフォルトのカテゴリー選択部分をキャプチャしたものになりますが、この「カテゴリー一覧」の中にカテゴリーをフィルタできる機能を追加します。 add_action( 'admin_head-post-new.php', 'post_filter_categories' ); add_action( 'admin_head-post.php', 'post_filter_categories' ); function post_filter_categories
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
WordPress：WP_DEBUG使用時に、エラー内容をログファイルに出力する方法 - NxWorld
WordPressで不具合等が出て原因を特定する際にWP_DEBUGを利用してデバッグモードにすることがあると思いますが、そのまま利用すると公開しているページにもエラー内容が表示されてしまいます。 非公開サイトやローカル環境など自分だけしか見えない状況であれば良いのですが、既に本番公開されているような場合にエラー内容をページ上には出さずに確認できるようにする方法です。 デバッグモードを有効化する デバッグモードを有効化する際には、まずwp-config.phpで70行目辺りから始まる下記のような記述を見つけます。 /** * 開発者へ: WordPress デバッグモード * * この値を true にすると、開発中に注意 (notice) を表示します。 * テーマおよびプラグインの開発者には、その開発環境においてこの WP_DEBUG を使用することを強く推奨します。 */ defin
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - NxWorld
いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,
WordPress：投稿一覧にサムネイル・ID・スラッグ・文字数の項目を追加する方法 - NxWorld
WordPress投稿一覧にサムネイル・ID・スラッグ・文字数の項目を追加する方法です。 小さくて見難いですが、上記イメージはデフォルトの投稿一覧をキャプチャしたものです。 表示オプションで何もいじっていなければこの画像のように「タイトル」「作成者」「カテゴリー」「タグ」「コメント」「日時」の6項目が表示されていると思いますが、ここに個人的によく使うことがあるのではと思う「サムネイル」「ID」「スラッグ」「文字数」の4項目を新たに追加・表示させます。 実装にはを使用するので、テーマ内にない場合は作成して下記で紹介する方法をそれぞれ記述してください。 // 投稿一覧にサムネイル追加 function add_posts_columns_thumbnail( $columns ) { $columns['thumbnail'] = 'サムネイル'; return $columns; } fun
WordPress：ユーザー権限や情報によって条件分岐を行う方法 - NxWorld
当ブログでWordPressの管理画面カスタマイズをいろいろと紹介していますが、そのまま使用すると全てのユーザーに対して適用されます。 それを条件分岐を使用して特定のユーザーのみに適用させたりする方法です。 例えば不要な投稿画面内のボックスやサイドメニューを非表示にするカスタマイズを行う場合、単純にその処理を記述するだけでは全てのユーザーに対して適用されますが、これを特定のユーザーには適用させたくない形で実装したいときなどに使える方法です。 「特定の権限以外のユーザー」 に適用する 特定の権限以外のユーザーに適用させたい場合はcurrent_user_can()を使って実装ができます。 例えば「管理者」以外の権限に対して何か行いたい場合はfunctions.phpへ下記のように記述します。 上記は権限が「管理者」の場合ですが、その他の権限にしたい場合はadministratorの部分を任意
WordPress：投稿画面のパーマリンク編集部分とクイック編集を非表示にする方法 - NxWorld
WordPressの投稿画面（カスタム投稿や固定ページ含む）で、パーマリンクの編集をできないようにその部分を丸々非表示にする方法です。 また、パーマリンクの編集は投稿画面だけでなく一覧ページの「クイック編集」からも変更できてしまうので、そちらも併せて非表示にします。 投稿画面のパーマリンク編集部分を非表示にする イメージは投稿・固定それぞれの投稿画面をキャプチャしたもので、デフォルトではこのように表示されている部分を丸々非表示にします。 方法としては管理画面用のCSSを用意して消したい要素を片っ端からdiplay: none;していく方法もありますが、今回はfunctions.phpを使用して別の方法で非表示にしていきます。
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
WordPress：ログイン画面をオリジナルにカスタマイズする方法 - NxWorld
WordPressのログイン画面のカスタマイズは過去にもロゴを変更する方法など書いたことがありますが、いろいろ試していたらまた幾つか覚えておきたいことが出てきたりしたので、既出しているものも含めてWordPressのログイン画面をオリジナルにカスタマイズする方法をまとめました。 October 01, 2020 追記 ここで紹介している内容は、WordPress Ver 3.9.0で試したものになります。 内容によっては現バージョンでは非推奨のタグが使用されていたり、フック名が変更されている可能性がありますのでご注意ください。 デフォルトのログイン画面 イメージはWordPressのデフォルトのログイン画面をキャプチャしたもので、これをfunctions.phpを使ってオリジナルのログイン画面にしていきます。 カスタマイズ後のログイン画面 イメージは簡単にですが実際にここでまとめているカス
開発者向けプラグイン 25＋
WordPressには便利なプラグインが沢山あり、それらを使うことであまり知識がない方でも様々な機能を実装して自分好みのブログやサイトを作ることができます。 ソーシャルボタンやページネーションを簡単に設置できたり、関連記事や人気記事を手軽に表示できるといったような見栄えを変えたりするユーザー向け（表向き）の機能を実装するタイプのプラグインはよく見かけるのでご存じの方も多いと思いますが、WordPressにはこういったプラグインだけでなく、何かと捗る開発者向けの裏方タイプのプラグインも便利なものが数多くあるので、それらの中から自分が覚えておいて損はないと思うものを紹介します。 全部のプラグインを普段の開発時に使用しているというわけではありませんが、以下で紹介しているものはいずれも個人的に開発時に便利だと思ったプラグインです。 有名なデバッグ系プラグインをはじめ、テンプレートファイルやIDを容
グリッドレイアウト採用時に便利なjQueryプラグイン 20 - NxWorld
有名なサイトだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。 少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。 基本的な動きは同じようなものでもサポートブラウザやアニメーションの有無などがプラグインによって違うので、自分の中で幾つか使いやすいものを見つけておくと良いと思います。 一応グリッドレイアウトを実装するためのプラグインということでまとめていますが、中にはフィルタリング・ソート・ドラッグ&ドロップなどの機能も併せて実装できるプラグインもあります。 また、基本的にフリーで使用できるもの中心でまとめていますが、商用利用
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
WordPress：wp_head()でheadに出力されるタグを消去する方法 - NxWorld
よく使うのに覚える気もなく毎回ググっている気がするので備忘録。 wp_head()を記述した際にhead内に出力されるタグを消す方法です。 wp_head()を記述した際にhead内に出力されるlink rel="alternate"やmeta name="genarator"などのタグですが、必要ないと思うものはremove_action()で消して、ごちゃごちゃしたhead内を綺麗にできます。 別にそのままでも支障はない（むしろ消してしまうと支障があるものが有る）と思いますが、確実に不要なものであれば消して少しでもソースを綺麗にしたいときに。 head内に出力されるものは例えば下記のようなものがあります。 link rel="alternate" link rel="EditURI" link rel="wlwmanifest" link rel="prev" link rel="ne
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressの管理画面カスタマイズ時に使えるハック #4 - NxWorld
プラグインやチュートリアル 25
