WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ - NxWorld
個人的に普段から対応することが多いものを中心に、更新者（クライアント）が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。 サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し手を加えるだけでもデフォルトに比べて大幅に使いやすくすることも可能です。 管理画面に任意のCSSやJavaScriptを適用する CSSであればフロントのデザインに近い感じで管理画面を装飾したりデフォルトのレイアウトを使いやすい形に調整するなど、JavaScriptであればデフォルトにはない動きをちょっと付けたり逆にデフォルトで実装されている動きを無効化するといったように、管理画面をカスタマイズす
WordPress：入力文字数の制限や補足文の追加など、管理画面の抜粋入力欄周りをカスタマイズする方法 - NxWorld
WordPressの投稿画面には抜粋入力欄が設けられていますが、その部分に入力できる文字数を制限したり抜粋入力についての補足などを入れるカスタマイズをする方法です。 予めクライアントに抜粋の仕様を伝えておけば良い話なんですが、担当者が仕様を忘れてしまったとか担当者が変わったことにより仕様がちゃんと伝わっておらず、「表示が崩れた！」とか「文字が途中から・・・になってしまう！」みたいなことを言われるのを防ぐことができるかと思います。 補足文に関してはフックとか使って表示する方法もあると思いますが、今回は全てjQueryを使って実装してみます。 入力できる文字数を制限する 抜粋に入力できる文字数や補足で表示し、さらに入力欄にはその文字数以上入力できないように制限をかけたものです。 実装には下記をfunctions.phpに記述します。 function excerpt_count() { ?>
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
WordPress：おっちょこちょいな人向け、投稿画面に必須項目を設定してくれるプラグイン「Post Type Requirements Checklist」 - NxWorld
「Post Type Requirements Checklist」は、投稿画面に必須項目を簡単に設定できるプラグインです。 指定した項目で何が抜けているのかもわかりやすく、項目が全て埋まっていないと公開ボタンも表示されない仕組みなので、いつもアイキャッチ指定やカテゴリー指定を忘れて公開してしまうなんて人にピッタリだと思います。 紹介している内容やキャプチャなどは、WordPress Ver 4.1で使用した際のものになります。 インストール・有効化 管理画面のプラグインから「Post Type Requirements Checklist」を検索してインストール、もしくは「Post Type Requirements Checklist」からファイルをダウンロードして環境にアップロード。 プラグインを有効化すると「設定」に「Post Type Requirements」という項目が追加さ
開発者向けプラグイン 25＋
WordPressには便利なプラグインが沢山あり、それらを使うことであまり知識がない方でも様々な機能を実装して自分好みのブログやサイトを作ることができます。 ソーシャルボタンやページネーションを簡単に設置できたり、関連記事や人気記事を手軽に表示できるといったような見栄えを変えたりするユーザー向け（表向き）の機能を実装するタイプのプラグインはよく見かけるのでご存じの方も多いと思いますが、WordPressにはこういったプラグインだけでなく、何かと捗る開発者向けの裏方タイプのプラグインも便利なものが数多くあるので、それらの中から自分が覚えておいて損はないと思うものを紹介します。 全部のプラグインを普段の開発時に使用しているというわけではありませんが、以下で紹介しているものはいずれも個人的に開発時に便利だと思ったプラグインです。 有名なデバッグ系プラグインをはじめ、テンプレートファイルやIDを容
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
WordPress：カテゴリー選択を1つしかできないように制限する方法 - NxWorld
WordPressのカテゴリー選択部分はチェックボックスで表示されており、もちろんチェックボックスなのでひとつの記事に対して複数のカテゴリーを選択することができます。 ただ、場合によって複数選択されてほしくないということがあるので、カテゴリーを1つしか選択できないように制限する方法を備忘録兼ねて紹介します。 同じことを実装しようとする際、1つに制限するからラジオボタンに変更するというのをよく見かけます。 たしかにその方がわかりやすいので自分もその方法を使おうかと思ったのですが、投稿画面ではラジオボタンで問題なく実装できても、記事一覧のクイック編集部分がラジオボタンだと自分の知識不足もあって上手く実装できませんでした...。（正確にはとりあえず実装はできるけど、挙動が非常に怪しい） 投稿画面はラジオボタンで実装して、クイック編集に関してはいっそのこと非表示にするのも考えましたが気持ち悪い感じ
WordPress：PCとスマートフォンでコンテンツを切り替えたい際に便利なwp_is_mobile関数＋α - NxWorld
wp_is_mobile()とはWordPress Ver 3.4から実装された関数で、PC用とiPhoneやAndroidといったスマートフォン用とでコンテンツを切り替える際に便利な条件分岐タグです。 今まで実際に使ったことはなかったのですが、ちょっと使ってみて今後使いそうだと思ったので備忘録。 先日このブログを少しいじろうと思い、以前から機会があったら使おうと思っていたwp_is_mobile()を実際に使用しようとしたときに調べたり試した備忘録になります。 いろんな方がエントリーなどで紹介していたりするので便利なんだろうなとは思っていましたが、例えばPCとスマートフォンでは広告を切り替えたいとか、各コンテンツの見栄えを手っ取り早く変えたいときなど、実際に自分でいろいろとやってみるとたしかに便利だなと思いました。 そもそもPCとスマートフォンでテーマを別々にしていれば「Mobile T
jQuery：よく使用される機能をまとめて実装できるプラグイン - NxWorld
スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。 予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。 紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。 yuga.js web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。 ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。 機能 ロールオーバー 現在のページをハイライト表示 外部リンクを別ウインドウで開く 画像をthickboxで表示（thickbox.jsを使用） スムーススクロール タブ機能 CSS3の擬似クラスをクラ
WordPressの管理画面カスタマイズ時に使えるハック #3 - NxWorld
function db_recent_posts() { global $post; $args = array( 'numberposts' => 5 ); $recent_posts = get_posts( $args ); echo '<ol>'; foreach( $recent_posts as $post ) { setup_postdata( $post ); echo '<li>（' . get_the_date( 'Y年n月d日' ) . '） <a href="' . get_the_permalink() . '">' . get_the_title() . '</a></li>'; } echo '</ol>'; } function add_db_recent_posts() { wp_add_dashboard_widget( 'db_recent_posts
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSグラデーションで作った背景パターンのサンプル - NxWorld