WPブロックその15-ファイル-
この記事について
WordPressのブロックをコードエディターを使い、HTML視点で見てみる。
内容は以下。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー
各事項については以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
WPブロックその15-ファイル-
該当ブロック画像
ブロックのコード
<!-- wp:file {"id":■,"href":"■"} --><div class="wp-block-file"><a id="wp-block-file--media-■" href="■">■</a><a href="■" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-■">ダウンロード</a></div><!-- /wp:file -->
■は任意の情報
HTMLコードの意味
<!– wp:file{“id”:■,”href”:”■”} –>と<!– /wp:file –>
<!– wp:file{“id”:■,”href”:”■”} –>と<!– /wp: file–>は、その間がファイルブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。メディアのidとリンク先が入っているのが確認できる。
またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
<a>と</a>
通称aタグ
<a>と</a>は、その間のコンテンツにリンクがある事をコンピューターに伝える為に使われ、<a>内にあるhref=”■”がリンク先となるページやファイルの情報。
href=”#と■ブロック(タグ)id■”で、idの場所に遷移するページ内リンクが可能。
使い方
- ファイルの添付
補足等その他
- divタグにclass=”wp-block-file”
- aタグにid=”wp-block-file–media-■”
- aタグにclass=”wp-block-file__button wp-element-button”
- aタグのaria-describedbyは中の記述idタグと関連付けしている
- aタグのdownloadはダウンロード用リンクである事を明示
まとめ
ブラウザ上で使えないファイルや、ページ上での使用を考えていないメディアなど添付(リンク)する感覚で使えば、ベアクロウ系ニートには問題なさそうな印象。
よろしく