対馬 俊彦
フォーラムへの返信
-
投稿
-
私も仲間に入れてください 😀
子テーマの functions.php に以下のコードを追加する方法もあります。
function my_lightning_page_header_title_html( $page_header_title_html ) { if( is_home() ){ $page_header_title_html .= '<div class="page-header-subtext">サブテキスト</div>'; } return $page_header_title_html; } add_filter( 'lightning_page_header_title_html', 'my_lightning_page_header_title_html' );ご質問者は「ブログTOPだけできなくて困っている」とのことですが、
* アーカイブページ
* 個別投稿ページ (表示要素を 投稿タイプ名 にしている場合)
も同様のデザインにしたいと思いますので、以下のようにするのがよさそうです。function my_lightning_page_header_title_html( $page_header_title_html ) { if( is_home() || is_archive() || is_single() ){ $page_header_title_html .= '<div class="page-header-subtext">サブテキスト</div>'; } return $page_header_title_html; } add_filter( 'lightning_page_header_title_html', 'my_lightning_page_header_title_html' );【追記】上記のコードはカスタム投稿タイプを使っていないことを前提としています。
【また追記です】実際に試してみたところ、以下のコードにすればカスタム投稿がある場合でもやりたいことができました。
function my_lightning_page_header_title_html( $page_header_title_html ) { if( 'post' === get_post_type() ){ $page_header_title_html .= '<div class="page-header-subtext">サブテキスト</div>'; } return $page_header_title_html; } add_filter( 'lightning_page_header_title_html', 'my_lightning_page_header_title_html' );ご質問者は同業をされている方ですので、申し訳ありませんが、私は役立ちそうな情報は示しますが、そのままコピペできるコードを示すことはできかねます。
昨日ご覧になったサイトを見ながらググってみてコードの意味を理解すれば、どの部分に入れればよいかわかります。
本番稼働しているサイトではないので、「ここかな？」と思うところにとりあえず入れて試してみるのもよいと思います。
試行錯誤してエラーを経験することも今後サイト制作をして行く上で役に立つと思いますので、がんばってみてください。
偉そうに書いてしまい、すみません。
以上、ご了承ください。
if ( 'photo' === get_post_type() ) {
と
}
で囲んで条件分岐すればご希望のことができると思います。※ の部分にあった add_action の行を削除してしまったのが原因です。
<?php function photo($post){ // カスタムフィールドの値など独自に表示したい要素 global $post; $append_html .= '<tr><th>作品：</th>' . esc_html( $post->pic ) . '</td></tr></br>'; $append_html .= '<tr><th>カメラ：</th><td class="text-right">' . esc_html( $post->c ) . '</td></tr></br>'; $append_html .= '<tr><th>絞り値：F</th><td class="text-right">' . esc_html( $post->f ) . ' </td></tr></br>'; $append_html .= '<tr><th>シャッタースピード）：1/</th><td class="text-right">' . esc_html( $post->s ) . ' </td></tr>'; echo $append_html; } ※ add_filter( 'veu_auto_eye_catch_post_types', function ( $post_types ) { $post_types[] = 'photo'; // 追加する投稿タイプ名例 return $post_types; } );【追記】本題から外れますが、
<table>と</table>が出力されていません。すでにご覧になっているかもしれませんが、下記のトピックが参考になります。
子テーマを作って下記にコードを入れてみましたが、出力されませんでした。
上記トピックを参考に試してその結果になったのであれば…
このトピックで石川さんが紹介しているリンク先の説明は Lightning の G3 モードを使用する前提になっていますので、G2 モードで動作する Lightning Pro をお使いの場合はアクションフックの指定が異なります。
*** 本文の後にカスタムフィールドを表示する場合 ***
G3 モード
add_action( 'lightning_entry_body_apppend', ...G2 モード
add_action( 'lightning_entry_body_after', ...*** 本文の前にカスタムフィールドを表示する場合 ***
G3 モード
add_action( 'lightning_entry_body_prepend', ...G2 モード
add_action( 'lightning_entry_body_before', ...横からすみません。
ヘテムルの PHP は
* モジュール版
* CGI 版
の2つがあり、モジュール版 を選んでいると最大アップロードサイズの変更ができないかもしれません。CGI 版 で試してみるとうまくいくかもしれません。
同じ会社（GMOペパボ）のホスティングサービス「ロリポップ」ではこれでうまくいってます。
ご質問の文面に沿っていませんが、同じ結果が得られるもうひとつのやり方を回答させていただきます。
G3 Pro Unit をお持ちなので、表示タイプを メディア にしてすべての画面サイズで 1 カラムに設定すれば、Lightning 標準 と同じ見た目になります。
たぶん…
枠線ボックスがコンテナ幅いっぱいに表示されるため、
画面幅が大きい端末で表示したときに間延びしたかんじになるので、
その見た目をなんとかしたいということなのだと推測します。
ご質問の意図には沿いませんが、やはり CSS で調整するのがよいと思います。
以下、CSS を使った調整例です。
1. グループブロックの 追加 CSS クラス に
mw-800を指定する。2. 以下の CSS を追加する。
.mw-800 { max-width: 800px; margin-left: auto; margin-right: auto; }3. グループブロックに枠線ボックスを入れる。
800の部分をお好みで調整してください。このやり方は枠線ボックス以外のブロックにも使えて汎用性があります。
最初の たぶん… の通りであれば、これでご希望に近い結果になるのではないかと。
【以下、追記です】
追加 CSS クラス を毎回指定するのが面倒であれば、上記のやり方で作った組み合わせパターンを VK ブロックパターン に登録しておくとよいです。
枠線ボックス自体の幅を80%指定した上でセンタリング
それに近いことは、枠線ボックスの 追加 CSS クラス に
w-75と指定すればできます。
たぶん、これがいちばんお手軽なやり方だと思いますが、
このやり方は w-25 w-50 w-75 w-100 の4つしかバリエーションがありません。https://getbootstrap.jp/docs/4.1/utilities/sizing/
カラムブロックを使うなら、3カラムにしてそれぞれのカラム幅を
10% 80% 10%
と指定して、2番目のカラムに枠線ボックスを入れればできそうです。【追記】カラムブロックだと画面幅によっては期待通りにならないですね。
ブレークポイントごとに幅を指定できたり…
ブロックの複合利用でそれができるかどうかよくわかりませんが、
できたとしても、裏技・力技的で、用途が限定的になる予感がします。ブレークポイントのことまで考えるなら、CSS で調整する方が結果的に楽ができると思います。
実際のページを見てみないとはっきりわかりませんが…
たぶん、ご質問者が非表示にしたい部分はキャプションではなく、画像ブロックの下マージンだと思います。WordPress では画像ブロックに 1em の下マージンが設定されていますので、それが見えているのではないでしょうか。
もしそうだとすると、以下の CSS で消せます。
.vk_slider_item_container .wp-block-image { margin-bottom: 0; }「Chrome 画像 ぼやける」
「Edge 画像 ぼやける」
でググると関連しそうな情報や解決方法がヒットします。ブラウザが画像を縮小表示するときのレンダリングに起因する現象みたいです。
いま確認してみたところ、1枚目・2枚目のアイキャッチ画像を出力している HTML は同一です。
なので、WordPress 側の問題ではないと考えます。私のデスクトップパソコンでは同じに見えましたが、
解像度 1366×768 のノートパソコンで表示したところ、2枚目の画像がぼやけて見えます。たぶん、パソコン側の処理に起因する現象ではないでしょうか。
参考情報です。
ご質問者がアップされた 1920*1280 の画像 22587773_m-1.jpg で私のサイトでも試してみました。
投稿リストを置いた固定ページはこちら ↓ です。
私のパソコンの Chrome / Edge で表示すると、1枚目・2枚目のアイキャッチ画像は同じように見えています。
ご質問者のパソコンではこの固定ページはどう見えていますか？
横からすみません。
石川さん、お気づきかもしれませんが、念のため報告させていただきます。
VK Blocks Pro 1.16.4 にアップデートしたら、VK ボタン ブロックで以下の問題も起きています。
* VK ボタン ブロックを追加すると、ボタンの色がついていない状態になる。このとき、ボタンの色は標準色の Primary に設定されている。
* 他の色（例：標準色の Success) を選ぶとボタンに色がつくが、そのページの編集画面を再度開くとボタンの色が標準色の Primary に変わってボタンの色が消えてしまう。
たぶん、JetPack というプラグインが原因だと思います。
このプラグインを停止して表示不具合が解消するのであれば、
「wordpress 画像 表示されない i1.wp.com」でググってみると、
関連していそうな情報や対策が見つかると思います。
