DRILL LANCER
フォーラムへの返信
-
投稿
-
「JetPack」や「All in One Seo Pack」等の他のプラグインでOGPを出力していたりしませんか？
また、「VK All in One Expansion Unit」の「デフォルトのOGPイメージ」の設定を空にするとどうなりますか？そのコードだとWordPressがあるフォルダ以下全体にBASIC認証がかかってしまいます。
私が使用しているBasic認証のコードは下記のとおりです。
私が使用しているサーバーは
/home/hogehoge/public_html/sub1.example1.com
/home/hogehoge/public_html/sub2.example1.com
/home/hogehoge/public_html/sub1.example2.com
/home/hogehoge/public_html/sub2.example2.com
という構造をしています。①wp-login.phpがあるディレクトリの.htaccess
<Files "wp-login.php"> AuthUserFile /home/hogehoge/public_html/.htpasswd AuthGroupFile /dev/null Authname "Please enter your ID and password" Authtype Basic require valid-user </Files>②wp-adminディレクトリの.htaccess
AuthUserFile /home/hogehoge/public_html/.htpasswd AuthGroupFile /dev/null Authname "Please enter your ID and password" Authtype Basic require valid-user <FilesMatch "(admin-ajax.php)$"> Satisfy Any Order allow,deny Allow from all Deny from none </FilesMatch>P.S.
解決したなら解決したとしっかり返答しないと後々見放されるかもしれないのでその点は気をつけたほうが良いでしょう。下記を実行してみてください。
①子テーマを作成して有効化
②親テーマのfront-page.phpを子テーマにコピー
③作成したarchive.phpを削除（邪魔になるため）
④子テーマにmodule_loop_home.phpを作成し下記のように記述
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header> <?php get_template_part('module_loop_post_meta');?> <h1 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> </header> <div class="entry-body"> <?php the_content();?> </div><!-- [ /.entry-body ] --> </article>⑤子テーマのfront-page.phpの63行目あたりを下記のように変更
変更前
<?php get_template_part( 'module_loop_post' ); ?>変更後
<?php get_template_part( 'module_loop_home' ); ?>デザインはともかくとして、これで、記事全文（ページャー以下は除外）を表示できると思います。
あと、私は一顧客であり、JPNSTYLEを持っていないのでデザインについては保証できかねます。
この点はご了承ください。P.S.
ちなみに、module_loop_home.phpの中身はsingle.phpから拝借しています。参考になればと思います。アイキャッチを登録するのは避けられませんが、
本文の最初の画像を自動的にアイキャッチ画像に設定する方法ならあります。上記を試して見てください。
自分のサイトアドレスをTwitterなどに貼ると、アドレスを貼っただけで、特定の画像が自動的にでかでかと表示されます。
OGPというやつですね。特定の画像というのはアイキャッチ画像です。
Vektor社のTwitter（画像参照）もそんな感じですね。
おそらく、「VK All in One Expansion Unit」では
Twitterでは「Summary Card with Large Image」を
出力するように指定しているのだと思います。私は一顧客なので、対応することはできません。
便乗する意味で、書きますが、
Twitterカードを「Summary Card」か「Summary Card with Large Image」
で選べるよう設定できる項目を追加していただけたら幸いです。iframeは親要素の幅を無視して表示されるので、
レスポンシブにするには上記のようなCSSを組むか、
JSで対応するかしかないようです。ちなみにvimeoでは貼り付けタグにもれなくレスポンシブ用のJSがついてくるようでした。
とりあえずギャラリー版とカラム版ができたので画像付きで投稿します。
- 説明文はどちらもキャプションを仕様しています。
- どちらの画像も上がギャラリー版、下がカラム版です。
- Editor.jpg がGutenbergでの表示、Site.jpg はサイト上の表示
カラムブロックでカラム数を変更するにはマウスカーソルを
カラムブロック左上にもっていくと表示される六文銭（Editor.jpg 参照）
をクリックすると右側のメニューでカラム数を変更できるようになります。画像の位置調整は画像選択直前（Select_image.jpg）の状態で決めないと
位置を変えるのはかなり面倒です。位置決めする際には
六文銭を掴んでドラッグ＆ドロップで位置を変えられます。
位置を決める際は上部に青い線が表示されるので参考にしてみてください。Gutenbergの肝はどうもこの六文銭にあるようです。
P.S.
あのアイコンは六文銭しか表現が思いつかなかったのであえてこう表現しました。対応ありがとうございます。
基本的にアップロードするのは画像のみを想定しているのでしょうか？
カスタマイズした子テーマをアップロードして・・・
みたいなこともおそらく可能になったわけですが・・・そういった意味でフォーラムの使い方を再検討したうえで
「フォーラム利用方法」の記事を編集したほうが良いかもしれません。私は下記の様にしてYouTubeの動画を貼り付けています。
ちなみに、カラム内フルサイズです。HTML
<div class="movie-wrap"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Q2CXPPPjC8k" frameborder="0" allowfullscreen></iframe> </div>CSS
.movie-wrap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }ブロックエディタを使用してみようと思いましたが、
ネスト化させようとすると結構煩わしいですね。LightningではBootstrapが使用されているので、
下記のように記述することができます。<div class="col-md-4"> <img src="画像1のURL" alt="" /> <p class="">テキストテキストテキスト</p> </div> <div class="col-md-4"> <img src="画像2のURL" alt="" /> <p class="">テキストテキストテキスト</p> </div> <div class="col-md-4"> <img src="画像3のURL" alt="" /> <p class="">テキストテキストテキスト</p> </div>上記をカスタムHTMLブロックに記述するなり、
再利用ブロックに登録するなりすると良いでしょう。col-md-4については下記サイトを見るとよいでしょう。
https://getbootstrap.com/docs/3.3/css/#grid-options
https://getbootstrap.com/docs/3.4/css/#grid-options
Lightning Originには3.4.1が、その他のスキンには3.3.4が
標準で搭載されているので２つ載せました。再利用ブロックの使い方は下記が詳しかったと思います。
WordPressのバージョンが5.00以上ならGutenbergがデフォルトのエディタです。
なので、WordPressのバージョンが5.00以上の場合Gutenbergプラグインは不要です。もし、WordPressのバージョンが5.00以上なのにGutenbergがデフォルルトではない場合、
Classic Editorをインストールすると
設定 > 投稿設定
に下記項目が追加されます。- すべてのユーザーのデフォルトエディター（クラシックエディタ or ブロックエディタ）
- ユーザーにエディターの切り替えを許可します。（はい or いいえ）
また、「ユーザーにエディターの切り替えを許可します。」に「はい」を選択すると
ユーザー > あなたのプロフィール
に下記項目が追加されます。- デフォルトエディター（クラシックエディタ or ブロックエディタ）
これらを使用して調整すると良いでしょう。
/** * Key Color CSS */ function my_lightning_keycolor_css() { $options = get_option( 'lightning_theme_options' ); $color_key = ( isset( $options['color_key'] ) ) ? esc_html( $options['color_key'] ) : '#337ab7'; $color_key_dark = ( isset( $options['color_key_dark'] ) ) ? esc_html( $options['color_key_dark'] ) : '#2e6da4'; ?> <style type="text/css"> .bg-main{background-color: <?php echo esc_html( $color_key ); ?>} .bg-dark{background-color: <?php echo esc_html( $color_key_dark ); ?>} .bd-main{border-color: <?php echo esc_html( $color_key ); ?>} .bd-dark{border-color: <?php echo esc_html( $color_key_dark ); ?>} .text-main{color: <?php echo esc_html( $color_key_dark ); ?>} .text-dark{color: <?php echo esc_html( $color_key_dark ); ?>} </style> <?php } add_action( 'wp_enqueue_scripts', 'my_lightning_keycolor_css' );とりあえず、上記のように設定しておいて
<p class="text-main bg-dark bd-main">あああああ</p>
という感じで使ってみてはいかがでしょうか？::beforeや::after等の疑似要素を使用する場合は必要に応じて上記に追加する感じで・・・もしくは、「css variables ie11 polyfill」あたりで検索して、
検索結果の中から納得行くポリフィルを見つけ出し導入して無理やりCSS変数に対応させるのも手かもしれません。
ポリフィルというのは古いIEを新しいCSS要素に無理やり対応させるスクリプトのことを指します。改行云々は「VK Blocks」の仕様というよりは「Gutenberg」の仕様っぽいので、
WordPressフォーラムの方で相談してみてはいかがでしょうか？
