WordPress 5.9.3 のブロックエディター 特定のブロックを表示しない

 WordPressのブロックエディター

プレビュー、公開で追加したブロックが表示しない時がある。

今回は 「見出し」の下に「アーカイブ」。

「見出し」が出ない。

 「アーカイブ」の下に「見出し」を追加し、プレビューすると表示された。

最初の「見出し」ブロックを削除し、追加した「見出し」ブロックを「アーカイブ」の上に持っていくと期待した表示となった。

WordPressは 5.9.3

Googleフォーム 2022 5 回答時のログイン

 Googleフォームで回答者がログインを要求されないようにするには

 「メールアドレスを収集する」をオフにする。

iPhone iOS の CSS対応 ブレース内の間違えは…

CSSのコードを一文字でも間違えていると、iOSはその間違えたところから閉じブレースカッコまで無視する。

スマホの幅に合わせる

ページの中身をたとえば1000pxにそろえて、いっぱいに表示しようとするとき、スマホではうまくいかないことがある
そういった時には

body,html{
    min-width:1000px;
}

をためしてみる。

スマホの幅いっぱいの（はずの）画像がはみ出たとき

imgのwidthの設定を画面より多きくしてしまって、ブラウザがふらつくのを治すには、「max-width」などを使うのだが、ただ単に設定変更してブラウザの再読み込みをしただけでは「WIDTH = 100%」にはならない。
iPhoneだけかもしれないが、リロードしてからブラウザをシュリンクして一度小さくしてやる必要がある。

CSS 「img」の下に隙間が…

vertical-alignのデフォルト値は、IEなどのメジャーなブラウザではbaselineに設定されているから

gとかjとか下にはみ出るアルファベットのはみ出た長さの分だけ隙間ができるわけです。

なので、

img{ vertical-align:bottom; }

とすると、「img」の下の隙間がなくなるのです。


参考サイト
http://webtech-walker.com/archive/2007/03/01143619.html

CSS フッターの下に隙間ができたときの対処

ページの中身が少なくフッターが浮いた状態になってみっともないことがある。
そんなときの解決方法。

FOOTERをWRAPPER の中に入れているときにはFOOTERの上にダミーのボックスを置き、それにFOOTERの高さと同じだけ「padding-bottom」するのが味噌。セレクターは「contents」とした。
それとWRAPPERは「position」を「relative」 に、FOOTERは「position」を「absolute」にしておく。
あとは普通にHTML、BODYとWRAPPERを「width: 100%」しれば完成。

参考にさせてもらったサイトはこちら
https://liginc.co.jp/designer/archives/6435

-----------------------------------

html,body{
     height:100%;
}
#wrapper{
     width: 100%;
     position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}
#contents{
     padding-bottom:140px; /*フッターの高さと同じ*/
}
#footer{
    height:140px;
     position:absolute;
     bottom:0;
}



しかし、FOOTERが400pxとか500pxとかデカい場合、この方法ではCONTENTの「padding」の分、空白部分が400pxとか500pxとかデカくなるのでみっともない。その場合は「background」か何かでごまかすしかなくなる。

div のhoverに「before」適用

HOVERにもコロンを二つ「::」つけることで疑似セレクターが適用できる

.contents-element a:hover::before{
content: "- > ";
}

投稿一覧にアイキャッチ

WordPressを使い始めたころからお世話になっている

「管理画面の投稿一覧にアイキャッチを表示する」スクリプト。


今回も使わせていただきました。


「野良プラグイン化」したものはダウンロードできなかったのですが、


functions.php　に記述する方で実装しました。


なぜデフォルトで実装されていないのかと不思議に思うほど実用的な機能です。


「 林家次男」さんのブログ
http://hayashikejinan.com/wordpress/tips/964/

is_home()が効かない

パーツのテンプレートを使ってページの下部、フッターの上にカテゴリバナー群を設置。
その中に上層の一覧ページへのリンクを貼る。

リンクのCSSをトップページとその他に振り分けるのに「is_home()」を使おうと思ったがトップページもすり抜けてしまう。

「is_front-page()」にしたり、「表示設定」で固定ページにしたりとやってみたが駄目。

たどり着いたのがこちら

http://kawatama.net/web/wordpress/1907

で、処理をリセットしていないせいだったようだ。


<?php wp_reset_query(); if(is_home()): ?>

トップページで表示したい内容

<?php else: ?>

トップページ以外で表示したい内容

<?php endif; ?>

これで解決。

楽天RMS スマホ商品ページにINPUT タグを設置する裏ワザ

楽天RMS、スマホの商品ページにINPUTタグを設置するにはタグの最後に全角スペースを13個挿入する

<input type="submit"　　　　　　　　　　　　　>

こんな感じ。

iFRAME版の裏ワザはいくつか記事があるが、INPUTのはどこにも見つからなかったので掲載する

Welcart 購入しても商品がカートに残る

購入手続きを完了しても商品が残ったままになっている。

Wel Cartのシステム要件は

・WordPress WordPress4.0
・PHP PHP5.4、5.5、5.6
・データベース MySQL5.5以上

https://www.welcart.com/wc-condition/

ロリポップサーバーのPHPバージョンが5.1だったので5.6に。

だが、MySQLはハードルが高そうだったので、アップしてあるファイル全てをバックアップしている間に


WCの公式ページに出ていた記事のようにテンプレートphpファイルを書き換えたところ

解決した。

「header.php」には

この位置

<?php wp_head(); ?>

</head>

「footer.php」には

この位置

<?php wp_footer(); ?>

</body>

で、テンプレートタグを記述する。

http://support.welcart.com/topic/178/

敷居の高い「MySQL」のバージョンアップはしなくて済んだ。

ポップアップで画像拡大

WPやっててアイキャッチ画像の拡大は大きなテーマでしたが、ほかの機能とぶつかったり動作がいまいちだったり、ありそうでなかなかいいのが見つかりませんでした。

今回、設置も超簡単で動きもスムーズ。（今のところですが）他の機能とぶつからない秀逸なjQueryを見つけたので記録しておきます。

名前は「Lity」。

HTMLのヘッダーに

<link rel="stylesheet" href="lity.min.css">

<script src="lity.min.js"></script>

それとjQuery本体を読み込み

リンクタグに

<a href="画像URL" data-lity="data-lity"><img src="画像URL"></a>

として「data-lity="data-lity"」を記述するだけ。

今回、ほかの機能として「bxslider」や「waypoints」等を設置するためjQueryは

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

としました。

問題なく動作してます。

デモ

「Lity」の設置はこちらを参考にさせて頂きました。

http://on-ze.com/archives/2556

「Lity」公式サイトは→こちら

ついでに、固定表示しているヘッダーナビと買い物カゴボックスが上に出てしまったのでz-indexを増やしたのですが、今まで”999999”くらいが上限と思っていたのが実は

-2147483647から2147483647

とのことでした。

こちらを見させていただきました。

https://app.codegrid.net/entry/z-index-1

アイキャッチ画像拡大機能追加で

・トップページのスライダー「bxslider」

・スクロールでふわっと出てくる「Waypoints」

・カートシステムの「Welcart」（カートない表示ボックスも固定表示）

・ヘッダーのグローバルナビと”ページのトップ”がスクロールで移動するちょっとしたパララックス

・Perlで組んだリクルート募集システム

それと今回の

・アイキャッチ画像拡大

の６つの機能がそろいました。

あと、できれば予約システムも、と思っていますが、こちらはウェブで完結させるにはかなり高度な技が必要そうなので検討中です。

しかし、すべて無料でここまでできるとは。。

チェックボックスにチェックがつかない

ワードプレス、Welcartのログイン画面。

「 ログイン情報を記憶」のチェックボックスが行方不明に。

CSSで20px角になおしたものの、肝心のチェックがつかない。

調べたら、背景でできるらしい。

input[type="checkbox"]#rememberme{

background:#ccc;

width:20px;

height:20px;

}

input[type="checkbox"]:checked{

background:#ff6600;

}

これだと”レ点”ではなく、真四角になってしまうが、とりあえずカッコも悪くないのでこれにしとく。

カートの中身ボックス WP & Welcart

Welcartで一通りの基本機能ができたので、巷でよく見る「カートの中身」ボックスに取り掛かりました。

個数や金額は難なく表示できたのですが、
カートに何も入っていないときと入っているとき。
さらにショップや購入画面にいるときとそれ以外のページにいるときで表示をかえるにはどうしたらいいのか。
カテゴリ分けは基本だが、カテゴリを追加したときに記述を変えないで済む方法。
ショップの商品はすべて「ITEM」カテゴリに入っているので、これを取得すればOK。

変えるべき表示とは商品が入っているときの「購入画面へ」と入っていないときの「ショップへ行く」のリンクテキスト。
ショップにいるときでカートが空の時は非表示、カートに商品が入っているときは「購入画面へ」、購入画面にいるときはこのボックス全体を非表示にする。

まず、ボックス全体は”is_page( get_option( 'usces_cart_number' ))”で購入画面にいるにいるかどうかを判別。
購入画面では非表示に。

購入画面以外では、
”usces_is_cart() ”をつかって、商品が入っていたら「購入画面へ」を表示、入っていなかったら「ショップへ行く」を表示。

そして、ショップにいるときは最上位カテゴリが「ITEM」であることを判別し、”welcart-incart-box-itempage”のセレクタ、「ショップへ行く」を”display:none;”しました。
商品が入っていたら「購入画面へ」は表示します。


これで完璧。

参考サイトはこちら。

http://securavita.net/get_category_parent_root/#category_archive_root


ちなみに、頂いたコードのままだと固定ページ（page）でエラーが発生する。
なので、”if(is_page()):”で括ってページを丸ごとエスケープしました。
固定ページなのに親カテゴリを探そうとするとエラーになるのでしょうか。
エラー箇所は「$parents = explode( ',',$parents );」の部分でした。
「explodeは”$parents”が文字列であることを期待している・・・」とか何とか。
よくはわかりません。





<!--/welcart カートの中身ボックス-->

<?php if ( is_page( get_option( 'usces_cart_number' ))): ?>

//カート画面ではボックスは非表示

<?php else: ?>

<div id="welcart-incart-box">
<div id="welcart-incart-box-title">お買い物状況</div>
<div id="welcart-incart-box-totalquantity">個数：<?php usces_totalquantity_in_cart(); ?>個</div>
<div id="welcart-incart-box-totalprice">合計金額：<?php usces_totalprice_in_cart(); ?>円</div>

<?php if( usces_is_cart() ): ?>

//カートに入っていいたら

<div id="welcart-incart-box-cartpage"><a href="http://suzukiayumu.moo.jp/zakuro/usces-cart/">購入画面へ</a></div>
<?php elseif ( !usces_is_cart()): ?>
<div id="welcart-incart-box-itempage"><a href="http://example.com">ショップへ行く</a></div>
<?php endif; ?>
<?php endif; ?>


<?php if( ! is_page() ): ?> //固定ページはエスケープする


//ここからコピペ

<?php
$cats = get_the_category();
$category = $cats[0];
$parents = get_category_parents( $category->term_id, false, ',', true);
$parents = explode( ',',$parents );
$root = get_category_by_slug( $parents[0] );
?>

//ここまでコピペ


<?php if( $root->name == 'ITEM' ): ?>

//最上位のカテゴリが「ITEM」だったら「ショップへ行く」ボタンを消す。

<style>
#welcart-incart-box-itempage{
display:none;
}
</style>
<?php endif; ?>


<?php endif; ?>



<!--/welcart-incart-box end--></div>
<!--/wel cart カートの中身ボックス　終わり-->

個別投稿ページでの地図表示

店舗の詳細ページを個別の投稿（SINGLE）でつくって、ブランドごとにカテゴリ分けなどして、カテゴリごとに背景を変えるなどしていた。

詳細ページに地図を載っけようと思ったので会社概要からとってきて貼り付け。

と、そこまでは良かったが、各店舗ごとに地図が変わるのは当たり前で、Google Mapスクリプトに与える座標をそれぞれの店舗用のものにしなければいけない。

JSON何とかとか、色々やってみたが最終的にはとても簡単な、行ってしまえば1行で実現できた。

実際には各店舗ページのスラッグで振り分けるので複数行になるが原理的には1行でOK。
ページごとに変数「$hoge」に与える座標を変更しているだけ。


<?php echo $hoge; ?>の部分に座標が入る。
もとは当然というかまんま数値が入っていた。
（このスクリプトの参考ページはURLを控えていませんでした。あしからず。）
はじめのうち、ただ単に「$hoge」とか「'$hoge'」とかやってみたが、変数の中身が出てこなかった。
結構探してみたが解決策は見つからず、<script type='text/javascript'>のなかで<?php ・・・?>が動くのであれば、これも行けるのでは。と試に実行。


みごとに座標がはまりました。


ちなみにJSONとやらを介したやりかた、


<?php $hoge = '座標を入れる'; ?> <script type="text/javascript"> var hoge = <?php echo json_encode($hoge); ?>; console.log(hoge); // 座標を入れる </script>


http://qiita.com/39_isao/items/09946484933b83060f10


で、<?php echo json_encode($hoge); ?>としていたが、これだと座標の前後にダブルクォーテーションがついてしまって使えなかった





************************************************


<?php if(is_single('shop1')): ?><?php $hoge = '35.682579, 139.752775'; ?>

<?php elseif(is_single('shop2')): ?><?php $hoge = '35.689838, 139.700331'; ?>

<?php endif; ?>

<script type='text/javascript'>

var mapCanvas;
function intialize() {
//Create a map
mapCanvas = new google.maps.Map(document.getElementById("map_canvas"));
mapCanvas.setCenter(new google.maps.LatLng(<?php echo $hoge; ?>));
mapCanvas.setZoom(17);
mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);

//marker1 : Tokyo, Japan
var marker = new google.maps.Marker({
position : new google.maps.LatLng(<?php echo $hoge; ?>),
map: mapCanvas
});
}
google.maps.event.addDomListener(window, "load", intialize);
</script>





このやりかたで、PHPの変数をJSで使えることが分かった。
しかもすごく簡単。
いろいろ応用できれば面白そう。

Premiere Pro Quick Time .MOVでの書き出し 「静止画の最適化」

Premiere Pro CC 2017から「.MOV」形式で書き出し、Adobe Media Encoderで「.MP4」に変換。
PC上では普通に再生したが、Androidタブレットではかなりの大きな乱れが。
この動画ではビデオではなく静止画を使っていたのですが、「.MOV」の書き出し設定で 「静止画の最適化」にチェックを入れたら治った。
何かの記事で「ビデオ動画はキレイだが、静止画は良くない。」と書いてあったので、これかな？とか思いながらポチッとしてみました。

静止画の寸法の再確認のため写真1枚だけのムービーを作ってインストール。
同じように荒れた。

いまだ原因不明。


追記

原因はともあれ、Premiere Pro CC 2017からの書き出しを「AVI」にすると非常に美しく、乱れのない動画ができた。
容量は4割ほど増加したが、タブレットでの再生にも問題なし。

動画をやってるとファイル形式に悩むことが多い。
変換やレンダリングにも時間がかかるし、同じアドビ製品を使っていてもサイト制作とはかなり勝手が違う。
とっとと終わらせないとワードプレスの世界に戻るのに手間がかかりそう。

ONKYO TA2C 55R302 SDカード破損

業務用のタブレット、オンキョウのTA2C。

店舗用タブレットメニューに動画を入れるためにMICRO SDカードを用意。

カードリーダーに差し込んでPCに接続。

こちらは何の問題もなく、3ファイル100MB 程を取り込んでくれた。

さて、リーダーから抜いて今度はタブレットへ。

この機種に限らずかも知れないが、出し入れがオルタネイト式（カメラのメモリカードスロットにもよくあるもの）になっていて、かなり奥まで差し込まないと装着できなかった。

で、エクスプローラーでタップしてみると「SD has no mounted」の文字。

USBに切り替えるという手もあるのだが、まずは「設定」で調査。

設定＞ストレージ＞SDカードをマウント

で「マウント」をタップすると「破損したSDカード」とのこと。

業務用のせいもあろうか、この機種の情報はほとんど出てこず、メーカーのマニュアルがいいところでした。

「初期化」の文字を入れてググっているとスマホでの対策が出て生きたので、こちらもメーカーのマニュアルらしいでしたが、見てみました。

http://www.jp.onkyo.com/support/smartphone/SIM_SDcard_toriatsukai.pdf

すると、「設定」でマウントしようとした時に出る「破損したSDカード」をタップするとフォーマット画面に進むとのこと。

たしかに初期化は正常に終了しWinにつなげても問題なし。

めでたく、MP4動画をインストールできました。

余談ですが、「設定」をいじっているとき、「SDカード」の下あたりの「消去」だか何だかをフォーマット鴨とか思ってタップしたところ、今までルートフォルダにずらっとエクスプローラーに並んでいたフォルダーが2つだけ残して全部消えていました。
ま、いいや。今度はタブレット本体でも初期化すればいいことだし。アプリは2個だけ再インストールすればいい。データなんて今回の動画だけ。
試験機でよかった。ホントウニ良かった。

Android系でのSDカードの初期化には気を付けましょう。ということでした。

Premiere Pro CC 書き出し 画質が荒い MP4

飲食店のメニューにタブレットを導入するということで、現在動画の作成をしている。
内容的にはフェードイン、アウトくらいのエフェクトでOKとのことなので、特に難しいことはない。FLASHならあっという間に作れそうなのだが。
作成するファイル形式は「MP4」限定。
使うソフトは「Premiere Pro」限定。
ソフトの使い方から勉強となった。
「Premiere Pro　初心者　使い方」でググりながら、静止画を貼り付けてフェードイン下だけの超基本的なアニメを作って書き出し。
設定画面には200pxくらいの小さな画面とありえないほど粗い画質。
「Premiere Pro　書き出し MP4 画質」などで探していると「シーケンス設定」の文字が。

この記事そのものではソリューションにならなかったが、ためしにその「シーケンス設定」とやらを開いてみると何やら怪しい数字が。

上の方の「ビデオ」の「フレームサイズ」が”4600x2800”くらいになっておりやたらとでかい。貼り付けた画像は1280x800なので。

他にいじるところが分からないので画像サイズと同じにしてみた。

すると、書き出しプレビューはさっきよりもかなり大きなサイズに。
ただ、画質はさっきと変わらない。

ネット情報では「.MOV」がいいとのことなので、やってみると確かにキレイになった。

Adobe の「Media Encoder」でMP4に変換。

やっとのことで使えそうな動画ができた。

ヘッダー(<head> </head>)内のスペース

ワードプレスでのコーポレートサイト制作でのこと。
気が付いたら画面の一番上に20px位の高さの空白ができていた。
画面を全選択すると空白部分の左端に半角スペースができていた。
「要素の検証」では「&nbsp;」。
これを削除すると空白も消えた。
場所は直近の作業でGoogleマップ設置作業に伴うAPI読み込み用に記入したタグのすぐ上。
はじめは全角と勘違いしエディタで検索したが「見つかりません。」。
タグの直前のスペースならそれを削除すればいのでは。ということでタグの前に2つくっついていたスペースを削除すると見事解決。
HTMLは基本不要なスペースを無視することになっているようだが、中には本文として表示してしまう場合があるらしい。