IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する
Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています ※Winodws10でIE11、Edge、Firefox 68.0.1、Opera 62.0.3331等で表示確認しました cssp {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/ line-height: 1.4; max-height: 4.2em; overflow: hidden; position: relative; text-align: justify; text-overflow: ellipsis; width:50%; margin:auto; } p::be
カスタム投稿タイプのパーマリンクをカスタム設定できるWordPressプラグイン・Custom Post Type Permalinks
WordPressのカスタム投稿タイプに関する記事が凄く多くなって来ましたが、まだWPに不慣れですとコードの管理が結構大変です。functions.php頼りという感じですしね。そういうわけなので、せめてパーマリンク化くらいはプラグインにお願いしましょう。 当サイトも含め、カスタマイズ記事は沢山あるんですけど、WordPressの大きな魅力はプラグインの豊富さです。もちろん、他デベロッパーへの依存にも繋がるのでメリットばかりとは言えませんが、工数を大きく減らせるのは間違いありません。 こんな感じでカスタム投稿タイプで作成した記事のURLを、通常の投稿同様にカスタム構造のパーマリンクに変更できます。※事前にパーマリンク設定がカスタム構造に設定されている必要があります。 各カスタム投稿タイプのパーマリンクを設定各カスタム投稿タイプごとのアーカイブのURL,日付によるアーカイブのURLを追加wp
WordPressのSEOに千手観音プラグイン、HeadSpace2・使用方法まとめ
千手観音の如き機能と噂のSEO系 WordPressプラグイン、HeadSpace2 を導入してみました。確かに高機能です。 ＷＰでＳＥＯするならコレ１本使いこなせ ればheadを弄る事もあんまりない気が します。HeadSpace2の機能はそれだけ では有りませんが、いいプラグインだと 思うのでご紹介です。 ほぼ全ての機能をご紹介しています。 インストール１・ダウンロードして解凍 ２・wp-content/plugins内に解凍したファイルをコピー＆アップロード ３・プラグインを有効化 ４・各種設定 ５・Done 設定設定にHeadSpaceが現れます。HeadSpaceのメニューは ・ページセッティング ・ページモジュール ・サイトモジュール ・オプション ・インポート があります。分かる範囲で以下にご紹介します。 ページセッティング セッティングは図のような画面で個別に設定可能です。
レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
WordPressを使ったブログの全記事数を取得するコード
最近まで知らなかったのでメモ。WordPressで全ての記事の総数を表示する為のコードがあるので覚書します。プラグイン探していたので助かりました。 普通にブログを書いているのであればあまり必要性は感じませんが、WordPressを使ったECサイトなどは「全商品数」を表示できるので意外と用途があったりします。 WordPressの総記事数を取得コードは以下。 <?php $numposts = $wpdb->get_var("SELECT count(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'"); if (0 < $numposts) $numposts = number_format($numposts); echo $numposts.' posts.'; ?> <?php $num
WordPressで無駄に追加してしまった不要なカスタムフィールドの名前を、簡単に削除するプラグイン | かちびと.net
地味に困ってた事が楽に解決したのでシェア。 WordPressで諸事情で無駄に追加してしまった 不要なカスタムフィールドの名前ってあると 思うんです。誤操作とか、他のプラグインで 自動で追加されたけどいらなくなった、とか。 そういう不要なカスタムフィールドを消す事 が出来るプラグイン。 削除するときはDBで直接消す、という手軽に消せないカスタムフィールド名。消さなくても大きな実害は多分無いけど、選択するときにプルダウンにあるのが凄く邪魔です。でも、それだけの理由でDBをいじるのは、慣れていない方にはちょっと気が引けます。 というわけで、簡単に消せるプラグインをご紹介します。これでストレス無くカスタムフィールドを利用できますね。 Delete Custom Fields 1つしか使わないのに誤作動とかテストで追加したやつが残って邪魔やねん・・・みたいな状況。地味にストレス溜まりますので、簡単
お手軽WordPress Tips：プラグインを使わず、簡単なコードでシンプルなサイトマップを作成する
WordPressで構築したサイトの対人用 サイトマップをプラグイン無しで作るTips。 手作業は面倒だけど、プラグイン使うほど じゃない、という気もするので、簡単に作 れる方法をご紹介します。もちろん、良い プラグインも存在しますので、プラグインで 問題ないならその方がいいと思います。 プラグインでしたら@jim0912さん作のPS Auto Sitemapというのが一番便利そうです。 ここでは、諸事情でプラグイン使えないんだという方用に。そんな場合あるのかよって言われそうですけど僕はあったのです・・・そう、あれは去年の夏のある日のこｔ 以下のコードをfunctions.phpに貼り付けます。 function simple_sitemap(){ global $wpdb; $args = array('depth' => 0, 'show_date' => NULL, 'date_fo
チェックボックスにチェックが入っていないと送信出来ないようにする
Result jQuery$('#check').click(function(){ if($(this).prop('checked') == false){ $('#submit').attr("disabled","disabled"); } else { $('#submit').removeAttr('disabled'); } });html<input type="checkbox" checked="checked" id="check"><a href="#">利用規約</a>に同意して送信する <input type="submit" id="submit" value="submit">viaHow do i disable a submit button when checkbox is uncheck?
WordPressにアップロードしてリサイズされたJPG画像の画質を1行のコードで改善させる
覚えておきたいTipsだったのでメモ。WordPressでのJPGの画質を少しでも改善させよう、という方法です。手軽に出来るので覚えて置いて損は無いかと思います。設定されている圧縮比を変更する、という方法。 今まで知らなかったんですけど、覚えておくといいかも。 リサイズ機能 WordPressにはリサイズ機能があります。例えば横幅500pxの画像をアップロードした際、300pxの幅で使いたければ上記のようにサムネイルを選択出来ます。 foo.jpgという名のファイル名なら「foo-300×225.jpg」という、リサイズされた画像を生成してくれます。 デフォルトは90％この際の圧縮比がデフォルト値では90％になっています。wp-includes/media.phpの410行目あたりには image_resize( $file, $max_w, $max_h, $crop = false,
固定ページに任意のウィジェットを簡単に追加出来るWordPressのプラグイン・Page Builder
地味に便利そうなプラグインがあったので備忘録的に。固定ページに、使用中のテーマで使えるウィジェットを簡単に追加出来る、というもの。ウィジェットを使いこなしている方には良さそうです。 ウィジェットは個人的にはクライアントワークでは欠かせない機能なので、こういったプラグインはちょっとありがたいです。 ウィジェットを固定ページに追加できる、というもの。その場でウィジェットタイトルも設定できますので、いちいちページ移動してウィジェットを管理する手間もありません。 プラグインを有効化すると固定ページを追加するところにタブが表示されます。ここでウィジェットを自由に追加します。カラム数を設定して横並びのレイアウトにする事も。 ウィジェットの追加は上記のようなlightboxで表示、選択する事が出来ます。 ただし、通常通り書いたコンテンツが無視されてしまいますので、テキストや画像は「テキスト」というウィジ
お手軽WordPress Tips：カスタムフィールドを使ってh1を記事に応じて変更出来るようにする
誰でも手軽に出来るWordPress tips。 今日のお手軽カスタマイズはSEO寄り。 サーチエンジンフレンドリーなtitleやh1 （又はh2）にするカスタマイズは沢山あ りますが、場合によっては融通が効き ませんので、この融通を効かそう、とい う内容です。 テンプレートタグやプラグインでSEOを行う場合が殆どですが、もう少し融通の効く方法を、というカスタマイズの例。シンプルにカスタムフィールドを使います。 コード<h1> <?php if (get_post_meta($post->ID, "h1", true)) : ?> <?php $key="h1"; echo get_post_meta($post->ID, $key, true); ?> <?php else : ?> <?php the_title(); ?> <?php endif; ?> </h1>別にh1じゃ無くて
WordPressでページ毎にbodyタグのidを振る
久々にWP関連の記事。bodyに、 ページ毎にユニークなidを振る というもの。body_classを使え ない状況、使いたくない理由が ある場合等の代替方法として、 またはidにしたい場合などに。 body_class()以外の代替案です。自分用メモ。 コード$body_id =""; if ( is_single() || is_page() ) { $body_id = ' id="'.$post->post_name.'" '; } else if ( is_category() ) { $category = get_the_category(); $body_id = ' id="category_'.$category[0]->category_nicename.'" '; }ページ名やカテゴリ名を取得します。で、 <body <?php echo $body_id; ?>>
WordPressのカスタム投稿（ポスト）タイプを作成するまでの手順リスト
捜し物をしている最中に、ちょっと気になったのでテスト的に記事にしてみます。WordPressに新たに追加されたカスタム投稿タイプですが、多少なりにカスタマイズ経験が無いとハードルも低くはない印象なので手っ取り早く作成出来る用にリスト化します。 便利なのにさほど深く浸透していない印象のカスタム投稿タイプ（カスタムポストタイプ）やカスタムタクソノミー（タグに親子関係を持たせる的な機能）とかいろいろと不可解なキーワードで混乱してる方も多いような気がします。 個人的には理解の前にとりあえず触ってみるのもひとつの手だと思いますので、まずは気軽に追加してみてからどういったものか調べればいいかなと。（賛否両論あるでしょうけど僕はとりあえず触って失敗して学びたい人なので カスタム投稿タイプってなんだろう カスタム投稿タイプとは、WordPressにデフォルトである「投稿」という機能とは別の「投稿」機能を加
チェックボックスとラジオボタンをスタイリングする為のjQueryプラグイン・iCheck.js
checkboxesとradioボタンをスタイリングするjQueryのプラグインです。カスタマイズ性に優れており、使い方も手軽そうだったので備忘録的にご紹介します。 よくあるプラグインですけど、使いやすそうだったのでメモ。 checkboxesとradioボタンをスタイリングするライブラリ。IE7にも対応しています。 かわいい。 スタイルは最初からいろいろと用意されていますのでカスタマイズの参考にもなりますね。 コード<script src="jquery.js"></script> <script src="jquery.icheck.js"></script>コアとプラグインを読み込みます。 $('input').icheck();初期化します。 $('input').icheck({ handle: '', // 'checkbox'か'radio'とすればどちらかに限定できる ch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
お手軽WordPress Tips：プラグインを使わず投稿記事や固定ページの好きな場所に任意のPHPファイルを挿入、実行できるようにする
コンテンツ中のテキストを任意のものに置換する
1つのカスタムフィールドで複数の値を登録し、実装する
WordPressのカスタムメニュー（wp_nav_menu）を使って、サブタイトル付きのナビゲーションを実装する
固定ページでタグを登録できるようにし、タグアーカイブにも含める
WordPressのカスタム投稿タイプとカスタムタクソノミーを使って新たに別のコンテンツを作ったので、制作プロセスを書きました
