体験談ホームWEB開発WordPress改行をリスト(li)に変換するショートコードで効率化【WordPress】2019.09.07記事を書いていると、リストで表現したいことが少なからずあります。ul(ol)タグとliタグを使用する、こういう奴↓ですね。<li>入ります</li></ul>ここにリストのテキストが入りますしかし、Wordpressのエディタで記事を書くと、いちいちliで囲ったり、インデントを付けたりするのが面倒くさくなってくるわけです。いうことで、今回はWordpressのショートコードを使用して、改行をするだけでliタグとして出力できる機能を追加してみました。改行をリスト化の仕様についてリスト化させるショートコード改行をリスト化の仕様について今回紹介するショートコードは、liタグを付けず、改行させるだけで1行のリストとしてみなし、自動的にliタグを挿入します。[listag]これが1行目これが2行目これが3行目[/listag]と書くことで、ulタグとliタグを自動的に付けます。<li>これが3行目</li></ul>liタグで囲う必要がないと、サクサクリストを書くことが出来るので、かなり作業効率が上がりますよ。番号を振るolタグを振りたい場合は、typeにolを付けてもらえればolタグ表示になります。type="ol"]これが1行目これが2行目これが3行目[/listag]これが1行目これが2行目これが3行目また、ulタグまたはolタグにクラスを付けたい場合は、class属性に任意のクラスを付けてもらえれば対応します。class="list-box"]これが1行目これが2行目これが3行目[/listag]リスト化させるショートコード下記のソースコードを、functions.phpに追記してください。'listagSC');ソースコードを追加したら、listagで囲ったエリアは、1行をliタグとしてみなすことができます。注意点として、1行=1liタグとなるため、liタグの中で改行を積極的に使う場合はこちらのショートコードは適していません。一応、手動挿入のbrに関してはしっかり動くようにしています。改行も適用これが2行目これが3行目ただ、liタグの中でよく改行を使う場合は逆に手間になりかねないので、用途に合わせてご利用ください。WordPressにて、記事の作成時に少しでも作業が効率化されればと思いリストタグのショートコード化を作成しました。1行に対しての自動挿入ですが、liタグはあまり改行ありきで使わないと思うので、自身の記事構成と合う方は実際に導入してみてください。ブラウザ上で改行毎に自動的にタグを挿入するツールも開発しました。改行毎にタグを自動挿入するツール改行毎にliタグやpタグ、brタグなどをリアルタイムに自動挿入するツールです。挿入したいタグは任意で決められます。記事の作成やHTMLの入力の補助でご利用ください。kinocolog.comliタグも自動挿入できるので、こちらも是非お試しください。以上、改行をリスト(li)に変換するショートコードで効率化、でした。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイトスポンサーリンクサイト内検索のちょうのプロフィールのちょうといいます。転職してWEBプログラマーになりました。趣味で任天堂のファンサイトをいくつか作っています。ポケモンとスマブラが大好き。@noticoco連絡先nochokinococo○gmail.com○を@に置き換えてください。制作講座jQuery入門jQueryの使い方を解説したページです。体験談ホーム検索トップサイドバースポンサーリンクサイト内検索のちょうのプロフィールのちょうといいます。転職してWEBプログラマーになりました。趣味で任天堂のファンサイトをいくつか作っています。ポケモンとスマブラが大好き。@noticoco連絡先nochokinococo○gmail.com○を@に置き換えてください。制作講座jQuery入門jQueryの使い方を解説したページです。UPDATE」の使い方2020.02.05PHPで診断テストプログラムの作り方【サンプルコードで解説】2020.01.302020.02.06jQueryで配列の値を検索し、判定を行う方法【サンプルコードで解説】2020.01.29PHPのmb_convert_kanaで全角⇔半角の変換を行う方法2020.01.27タイトルとURLをコピーしました。