投稿や固定ページのURLが日本語にならないようにする方法 - OPENCAGE
リンクをコピー WordPressでは、パーマリンク設定に「投稿名」を入れることが推奨されています。 この場合、投稿画面でパーマリンク（URLスラッグ）を編集して任意のスラッグ名を入力できますが、これを忘れると日本語タイトルがそのままURLに反映されてしまします。 ここで問題になるのは、日本語が含まれるURLは（環境によって）下記のようにエンコードされた長い文字列のURLに変換されてしまうことです。 例） https://open-cage.com/%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%83%91%e3%83%bc%e3%83%9e%e3%83%aa%e3%83%b3%e3%82%af%e3%81%aeurl%e3%82%b9%e3%83%a9%e3%83%83%e3%82%b0%e3%82%92%e8%87%aa%e5%8b%95%e7%94%9f%e6%88%9
実はこんなこともできる！MW WP Formの便利なカスタマイズを紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。バックエンドエンジニアのまうみです。 今回はWordpressでお問い合わせフォームを実装する際の定番プラグイン、MW WP Formの知っておくと便利なカスタマイズを紹介します。 MW WP Formはシンプルなショートコードを生成し、簡単に確認画面付きのフォームを作成できることが特徴です。しかもカスマイズの幅もとてつもなく広く、応用次第で様々な案件に対応できるポテンシャルを持ったプラグインです。 今回は機能別に、「えっ、そんなこともできるの？」というようなMW WP Formのカスタマイズ技をご紹介します！ 出力されるタグのhtml構造を変更したい 例えばデフォルトのタグのDOMの構造を変更して、独自のclassを追加したい……そんなときのためのカスタマイズです。 プラグイン内で管理されているテンプレートパーツを、WordPressのthemeディレクトリにコピーすることで
【WordPress】スラッグに記事IDを自動で指定する方法を解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 小学生のときからモスキートーンが聴こえなかったバックエンドエンジニアのまうみです。 今回はWordPressのカスタマイズでも定番の記事のスラッグの自動記事ID設定を紹介します。 なぜスラッグを記事IDにするのか まずはデフォルトの設定を確認してみましょう。 このように記事を保存した際に、記事のタイトル（日本語）がそのままスラッグに指定されてますね。 URLに日本語が混ざってしまうことを避けたい場合、記事を保存した後に、任意の英数字のスラッグを指定すれば問題ありません。 しかし、もし設定を忘れてしまったら? 日本語のURLが設定された状態でGoogleのインデックスに登録されてしまった場合、スラッグを後から変更するにはリダイレクトの設定が必要です。これは面倒ですね。 記事の保存時に日本語以外でユニークなスラッグが指定されていれば、少なくとも日本語が入ったままのURLで公開され
YouTube動画埋め込み時にパラメータを指定して表示をカスタマイズする方法 | Web Design Trends
YouTube動画埋め込みのパラメータ（オプション）の指定方法 YouTubeの動画埋め込みコードは、下記のようなiframeタグによって記述されています。 <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
WordPressのウィジェットを自作します
こんにちは、さるまりんです。 お手伝いをさせてもらっているサイトでサイドバーにいろんなものをウィジェットを使って表示しているとそのままでは10個までしか追加できないことが判明！ サイトはWordPressで作成しており、Widget Logicというウィジェットに条件分岐をつけられるプラグインを使って、PCの時はこれ、モバイルの時はこれ、投稿ページはこれ、リストの時はこれ、この投稿にはこれなんて追加しているとすぐに限界までいってました。 さあ、どうしよう。 考えました。ウィジェットを自分で作ってたらどうだろう、と。 自作ならばその中で好きなように条件分岐もできるし、例外的な動作も実装することができるかなということです。 自作ウィジェットの実装 実装するコードは次のようなものです。 functions.php // 自作ウィジェットのクラスを読み込み require_once __DIR__
【WordPress】ウィジェットを自作したくて調べたこと・作り方【画像付き最新記事】 | 内向型人間の知恵ブログ
新しいブログテーマを作るにあたり、「サイドバーに最新記事を出してぇなぁ」と考えていました。 WordPressのデフォルトのウィジェットでも最新記事を表示することは可能ですが、こちらはアイキャッチがなくタイトルのみ。 タイトルだけよりも、絵があったほうが見栄えがいい。 「無ければ作ればいい」という精神で、アイキャッチ付きで表示できるウィジェットを作ったので、その解説をしていきます。 プラグインを使わず、かつ仕組みを理解して自作したい方にどうぞ。 期待する動作・完成イメージ ウィジェットとして登録、並び替え、設定ができる最新記事を指定したn件表示する最新記事のアイキャッチも同時に表示する 言ってしまえば「デフォルトのウィジェットにアイキャッチが付いてる」だけなんですが。 口で言うのが簡単でも、実装しなきゃ実現しないのがプログラミング。 簡単な流れ 完成までの流れをフローチャートに起こしました
【WordPress】ビジュアルエディタで編集したいけどTinyMCEの自動整形をどうにかしたい | バシャログ。
ご無沙汰しております。yamashitaです。 どの職業でも"瀬戸際"ってやつが想像以上に続くことってありますよね。 その辺見極める力は是非付けたいところです。 それはそれとしてWordPressで使用されているエディタ、TinyMCEの仕様に振り回されました。 日々コードを見て慣れている開発者としてはテキストエディタ側でHTMLを編集したい、 実際に運用する普段コードに慣れていない人は（あとからプレビューするとしても）ビジュアルエディタで実際の見た目に近い状態で編集したい という当然の要望がありますよね。 しかし、ビジュアルエディタで編集すると意図して組んだHTMLが崩れてしまうということが多々あり、苦労しました。 検索すると多くの方が困っているようで、プラグイン（主にTinyMCE Advanced）を使ったり、使わなかったりと様々な方法で解決されているようでした。 それらを総合的に取
Bootstrap ナビゲーションバー（Navbar）のカスタマイズ方法といろいろなデザインの実装例
Bootstrap 4のナビゲーションバーのカラーを変更したり、アイテムを整列させたり、レスポンシブのブレークポイントを変更するなどのカスタマイズ方法、ナビゲーションバーのいろいろなデザインの実装例を紹介します。 Bootstrap Navbar Guide and Free Navigation Examples by Nataly Birch 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ナビゲーションの重要性 Botostrapのナビゲーションバーとは Bootstrapのナビゲーションバーのカラーを変更する方法 Bootstrapのナビゲーションバーのアイテムを整列する方法 Bootstrapのナビゲーションバーのブレークポイントを変更する方法 Bootstrapのナビゲーションバーのいろいろなデザインの実装例 終わり
商用利用無料！自分のデザインに合わせてカスタマイズができるSVGのアイコン素材 -Ikonate
デザインにぴったりなアイコンを探すのは、なかなか大変です。カラーの変更であれば簡単かもしれませんが、ストロークの太さ・角丸などは、普通の無料アイコンでは調整するのはできないでしょう。 アイコンのスタイルをカスタマイズして利用できるSVGアイコンを紹介します。 Ikonateの特徴 カスタマイズが可能な無料アイコン あなたがデザインしているブランドやプロダクトのニーズに合わせて、アイコンを簡単にカスタマイズできます。 アクセシビリティ 誰にとっても分かりやすく、そして見やすくデザインされたアイコンです。 パフォーマンス アイコンは最適化されたSVGでダウンロードでき、SVGスプライトやインラインSVGでも利用できます。 Ikonateの一番の特徴は、カスタマイズが可能なことです。 オンラインで、アイコンのカラー・サイズ・ストローク・スタイルなどをカスタマイズできます。登録など、面倒なことは一
CSSリセット、2019年におすすめのカスタマイズ方法
Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセットを紹介します。 My CSS Reset/Base 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSリセットについて margin, padding, borderのCSSリセット フォントのCSSリセット レイアウトとbox-sizingのCSSリセット 特定要素のCSSリセット 属性と状態のCSSリセット スクリーンリーダー専用の
WordPress サブ ページ メニュー ウィジェット
WordPress で親ページに子ページのメニューを表示するウィジェットを作成してみました。 コーポレート サイトなどでは、固定ページに階層をもたせるケースが結構あるとおもいます。この場合、親ページ（「会社案内」等）に子ページ（「会社概要」、「沿革」等）へのメニューがあるとユーザリビティが良いのではないでしょうか。 そんなメニューを表示するウィジェットです。 仕様 階層構造ではない場合、ウィジェット自体を表示しない。 親ページ（トップ階層）の場合、その階層下をメニュー表示する。 子ページの場合、親ページの階層下をメニュー表示する。 functions.php functions.php などに下記のコードを記述します。 class Widget_Sub_Page_Menu extends WP_Widget { function __construct() { $widget_ops =
【WP】年別・月別アーカイブ表示をカスタマイズする方法
当サイトでは、過去記事の年別・月別アーカイブ表示に、ウィジット「アーカイブ」ではなく、wp_get_archives()関数を使っています。 自前で関数を使ってカスタマイズしたのは、 アコーディオン表示（トグル表示）にして、見た目をすっきりさせたい リストのアイコンを、開いているとき/閉じているときで、変えたい と思ったことがきっかけです。 デフォルトのウィジット「アーカイブ」ではそのようなカスタマイズをしにくいので、wp_get_archives()関数を使うことにしました。 ネット上に色々な例があがっていますが、細かいところで違いもあるので、当サイトではこのようにしていますという内容をまとめてみました。 以下のプログラムから、このような挙動のアーカイブ表示になります
Gutenbergの準備がまだの人に、WordPressのGutenbergを無効化する方法のまとめ
8月2日にリリースされたWordPress 4.9.8で、次期エディタである「Gutenberg」がダッシュボードに表示され、驚いた人も少なくないと思います。正式な実装は数ヵ月後に予定されており、これは一部の人にとっては素晴らしいニュースであり、他の人にとってはそれほど素晴らしいニュースではないかもしれません。 Gutenbergが正式に実装されると多くのサイトやブログに影響を与えます。一つの選択肢として、Gutenbergを無効化する方法を紹介します。 How to Disable Gutenberg: Complete Guide ちなみに、4.9.6+であれば「Gutenbergのプラグイン」をインストールすることで、Gutenbergを利用することができます。 現時点では星1が多く、評判はよろしくないようです。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイ
アーカイブページで、ターム（カテゴリ）ごとに分けて記事一覧を表示する | WordPressカスタマイズ事例【100ウェブ】
アーカイブページで、ターム（カテゴリ）ごとに分けて記事一覧を表示する テーマ販売あり いろいろ製品があってそれをカテゴリ、ジャンルごとに分けて一覧表示したい、というニーズは結構あります。 そんなときの解決方法を2つご紹介します。 例としてカスタム投稿タイプを items、カスタム分類名を items_cat としてますので、そのつもりで読み進めてください。 普通にタームごとに記事一覧を表示するバージョン まず普通バージョンですが、テーマのカスタム投稿アーカイブページ（archive-items.php）の記事一覧（アイキャッチあり）表示部分を次のように記述します。 <?php // カスタム投稿タイプ $post_type = 'items'; // カスタム分類名 $taxonomy = 'items_cat'; // パラメータ $args = array( // 親タームのみ取得 '
とっても簡単！ページトップへ戻るボタンを設置する（Twenty Seventeen）－WordPress – 妻と僕。
前回の記事では、クリックすると記事内の任意の場所にジャンプするという「目次」を設置しました。今回はその逆バージョンです。「TOPへ戻るボタン」をクリックすると記事の一番上にするするっと移動します。「目次」の設置も簡単でしたが、「トップへ戻るボタン」はもっと簡単ですので、気軽に設置可能です。 スポンサーリンク 《 目 次 》 今回変更するPHP footer.phpの変更 戻るボタンのCSS（実質ここで完了） 下にスクロールされたらボタンを表示する スムーススクロールの実装 マウスオーバー時のCSS（参考） 今回変更するPHP 今回手を加えるPHPは「header.php」と「footer.php」です。まだ子テーマにコピーしていない人は、親テーマからコピーしましょう。 PHP「header」と「footer」を子テーマへ footer.phpの変更 下記コードをコピーし、footer.ph
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
High Quality Royalty Free icons
デザインに適したアイコンがこれで見つかる！ UIデザイン用のさまざまなアイコン素材をまとめて比較・カスタマイズ・ダウンロードできる -Iconer
【コピペで使える】日本語版WordPressチートシート
★★★WordPressの記事検索機能を作る方法 | lblevery
簡単で便利すぎる！UI用のシンプルなSVGアイコンをカスタマイズしてダウンロードできる -ICONSVG
