web-dev-qa-db-ja.com

ショートコードからのフォーマット済みDivの最初の改行を無視することは可能ですか？

私は[pncode]のショートコードを作成しました。それは私がいくつかのプログラミング構文を囲みそしていくつかのスタイルを適用することを可能にします。特に、それはテキストをフォーマットしてそれを等幅にします（助けになるなら、以下のフルCSS）。

ワードプレスエディタで、私はそのような構文を入れることができることを望みます：

[pncode]
some sample code
some sample code
some sample code
[/pncode]

しかし、これは最初に "return"を挿入します。私はこのような私のコードを追加することによってそれを回避することができます：

[pncode]some sample code
some sample code
some sample code
[/pncode]

しかし、それはきれいに見えません。

これは上記のサンプルのどちらかがどのように見えるかの図です。

queston example

私の質問：[pncode]の後の最初の改行を無視する方法はありますか。そのため、ビジュアルエディタで上記の最初のコードを入力できます。それは画像の2番目に表示されるコードのようになります。

以下のすべての情報が必要かどうかはわかりませんが、徹底的に説明します。

これは[pncode]で囲まれているものすべてに適用されるCSSです。

.pncode {
    background: #ddd;
    font-family: consolas, courier, monospace;
    white-space: pre;
    box-shadow: 3px 3px 3px #999;
    border-style: solid;
    border-width: 1px;
    border-color: #333;
    text-align: left;
    padding: 5px;
    line-height: 90%
    width: 98%;
    overflow: auto;
}
.pncode br {
    display: none;
}

そしてそれは私のfunctions.phpへのこの追加からCSSに囲まれています：

function pncode_shortcode_function( $atts , $content = null ) {
    return '<div class="pncode">' . $content . '</div>';
}
add_shortcode( 'pncode', 'pncode_shortcode_function' );

編集：私が投稿した画像からの望ましくないサンプル出力は、<BR>のために作成されていません。これは、そのショートコードで囲まれたテキストをフォーマット済みに設定する[pncode]の後のハードリターンのために作成されています。

Wordpressはビジュアルエディタの至るところにBRの束を追加します、そしてそれが私が私のCSSのこの部分を持っている理由です：

.pncode br { display: none; }

Wordpressが追加したBRは無視されるので、それはそれを可能にします。

しかし、特に私が取り除こうとしている改行は、整形済みテキストとしてマークされている 'div'の 'enter'のために追加されたものです。

繰り返しになりますが、それが可能かどうかさえ私は知りません。私は自分が専門家ではないことを知っているので、専門家がそれを確認できるか、できれば創造的な解決策を見つけることができるフォーラムで質問したいと思いました。

shortcodecssvisual-editor
1
Eddie

あなたは、ショートコードの内容の冒頭にある余分な<br />を置き換えてみることができます。

あなたは多くの方法でそれを達成することができますが、ここに例があります：

if( '<br />' === substr( ltrim( $content ), 0, 6 ) )
    $content = substr( ltrim( $content ), 6 );

return '<div class="pncode">' . $content . '</div>';

substr() と ltrim() の各関数を使ってみましょう。

更新：

コメントをくれた@userabuserに感謝します。

ショートコード文字列の先頭から、すべてのバリエーションのbrタグを削除する場合は、このようなreg-ex置換を構築しようとします。

$content = preg_replace( '#^\s*(<br\s*/?>\s*)+#i', '', $content );

例：

ショートコードの内容

   <br />    <br>
<BR> <bR> 
some sample code <br />
some sample code <br />
some sample code <br />

次のように表示されます。

some sample code <br />
some sample code <br />
some sample code <br />
3
birgire