画像 ファイルネームと大きさ
Anna-Recker-icon.jpg – Featured image(横幅 640px)
Anna-Recker-1.jpg – 記事の中の写真 1～3枚くらい(長径 1280pxくらい)
Anna-Recker-2.jpg
Anna-Recker-3.jpg
リンク
<i class="fa-solid fa-link"></i>
多言語
下のように「vv-lang」クラスに「fr」「en」とつけてあげることで
フランス語と英語を１ページに併記できます。
<div class="vv-lang fr">
フランス語の記事
</div>
<div class="vv-lang en">
英語の記事
</div>
<div class="vv-lang ja">
日本語の記事
</div>
レイアウト
ページのレイアウトは、「グリッド・レイアウト」を使っています。
架空のグリッドの中に、テキストや画像を配置います。
グリッド分割数を、デバイスごとに対応させて「レスポンシブデザイン」しています。
グリッドは、「横に12分割」のフォーマットです。
1 2 3 4 6 12分割 に区切ってデザインすることができます。
「col-12」 カラム12
「sm」は、スモールメディア：スマートフォン
「md」は、ミディアムメディア：タブレット
「lg」は、ラージメディア：PC のことを指します。
下の例文をコピペして、レイアウトをしてください。
Layout 3分割
スマートフォン(sm): 1分割 横幅100% 1枚だけ表示
タブレット(md): 3分割 横幅33% 3枚表示
PC(lg): 3分割 横幅33% 3枚表示
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
カラム1
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
カラム2
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
カラム3
</div>
</div>
</div>
カラム1
カラム2
カラム3
Layout 2分割
スマートフォン(sm): 1分割
タブレット(md): 2分割
PC(lg): 2分割
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
カラム1
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
カラム2
</div>
</div>
</div>
カラム1
カラム2
Layout 1分割
スマートフォン(sm): 1分割
タブレット(md): 1分割
PC(lg): 1分割
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
カラム1
</div>
</div>
</div>
カラム1
画像の大きさ – L M S
カラムのクラスに
- image-L
- image-M
- image-S
と付けることで、画像の大きさを調整できます。
<div class="container">
<div class="row" >
<div class="col-12 col-sm-12 col-md-4 col-lg-4 image-L" >
<img src="https://test.wakkaart.com/images/COMMON/Tatsuya-Furuhata_Portrait.jpg" width="100%" height="auto" />
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 image-M" >
<img src="https://test.wakkaart.com/images/COMMON/Tatsuya-Furuhata_Portrait.jpg" width="100%" height="auto" />
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 image-S" >
<img src="https://test.wakkaart.com/images/COMMON/Tatsuya-Furuhata_Portrait.jpg" width="100%" height="auto" />
</div>
</div>
</div>
HTMLの基礎
1 ヘッドライン
「hタグ」は、ヘッドラインを意味します。
タイトルや小見出しに、ヘッドライン定義することで、文脈を判りやすく
文章では、ます「h2タグ」から初めてください。
<h1>タイトル(アーティスト名 本のタイトル)</h1> <h2>大見出し</h2> <h3>小見出し</h3>
タイトル
大見出し
小見出し
2 パラグラフ
「pタグ」は、パラグラフを表します。
WordPressでは、本文中の改行に「Shift + Enter」改行することで、
自動的に「pタグ」が挿入されます。
パラグラグとパラグラフの間に、スペースを空けることで読み易くなります。
<p>La base du travail créatif d’Anna Recker est le dessin.</p> <p>En dessinant, elle démonte ses formes géométriques, les réduit à leurs éléments de base et les analyse. Plusieurs de ses dessins et ébauches semblent être des plans d’ingénieurs concepteurs pour des installations techniques. Cependant, ils nous rappellent aussi, d’une certaine manière, le “Disegno” magistral des artistes de la Renaissance. Bien entendu, Anna Recker ne se contente pas de désassembler.</p>
La base du travail créatif d’Anna Recker est le dessin.
En dessinant, elle démonte ses formes géométriques, les réduit à leurs éléments de base et les analyse. Plusieurs de ses dessins et ébauches semblent être des plans d’ingénieurs concepteurs pour des installations techniques. Cependant, ils nous rappellent aussi, d’une certaine manière, le “Disegno” magistral des artistes de la Renaissance.
Bien entendu, Anna Recker ne se contente pas de désassembler.
3 画像
「imgタグ」は、画像を意味します。
画像は、Add Media から Media > Library にアップロードできます。
<img src="/images/TIPS/ville.jpg" width="100%" height="auto" />
4 リンク
「aタグ」は、アンカーと言い、リンクを意味します。
リンクしたい文字を選んで、上のツールボックス「link」からリンクできます。
<a href="https://www.galeriesimoncini.lu/">simoncini</a>
Links
Bootstrap 5 – Layout
https://www.tohoho-web.com/bootstrap5/layout.html
fontawesome
https://fontawesome.com/icons
PHP – functions.php
「アーティスト」カテゴリーのみをアルファベット順に、それ以外は時系列順に並べている
/* ---------------------------------------------------------------------------------------------
Order Artist Name
--------------------------------------------------------------------------------------------- */
function twpp_change_sort_order( $query ) {
if ( is_admin() || ! $query->is_main_query() ) {
return;
}
if ( $query->is_category('artistes') ) {
$query->set( 'orderby', 'name' );
$query->set( 'order', 'ASC');
}
else {
$query->set( 'orderby', 'date' );
}
}
add_action( 'pre_get_posts', 'twpp_change_sort_order' );
アーティストとその子カテゴリーは、アルファベット順に並べる。それ以外は時系列順に並べている
/* ---------------------------------------------------------------------------------------------
Order Artist Name アーティストとその子カテゴリーは、アルファベット順に並べる
--------------------------------------------------------------------------------------------- */
function twpp_change_sort_order( $query ) {
if ( is_admin() || ! $query->is_main_query() ) {
return;
}
if(is_category()) {
$parent_cat_id = get_category_by_slug('artistes')->term_id;
$current_cat_id = get_category_by_slug($query->get('category_name'))->term_id;
if(is_category($parent_cat_id) || cat_is_ancestor_of($parent_cat_id, $current_cat_id)) {
$query->set( 'orderby', 'name' );
$query->set( 'order', 'ASC');
}
}
else {
$query->set( 'orderby', 'date' );
}
}
add_action( 'pre_get_posts', 'twpp_change_sort_order' );
Header Hero 5枚の画像をランダムに表示
<div id="header-hero">
<script type="text/javascript">
var imglist = new Array(
"/images/COMMON/header-1.jpg",
"/images/COMMON/header-2.jpg",
"/images/COMMON/header-3.jpg",
"/images/COMMON/header-4.jpg",
"/images/COMMON/header-5.jpg" );
var selectnum = Math.floor(Math.random() * imglist.length);
var output = "<img src=" + imglist[selectnum] + ">";
document.write(output);
</script>
</div>
展覧会 これまでの展覧会の記事から、最新の記事4件を取り出し、Bootstrapを使ってレイアウトする
<h2>passées</h2> <?php // expositionのカテゴリーの記事すべてを選択する $args = [ 'category_name' => 'expositions', // Artisteのカテゴリーのみ 'numberposts' => 4 ]; ?> <div class="container"> <div class="row"> <?php // expositionのカテゴリーの記事すべてを表示する $custom_posts = get_posts($args); foreach ( $custom_posts as $post ): setup_postdata($post); ?> <div class="col-12 col-sm-12 col-md-3 col-lg-3 front-page-expo-icons"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </div> <?php endforeach; ?> </div> </div>
アーティストの名前を全てBootstrapを使ってレイアウトする
<h2>artistes</h2> <?php // Artisteのカテゴリーの記事すべてを選択する $args = [ 'category_name' => 'artistes', // Artisteのカテゴリーのみ 'orderby' => 'name', // アルファベット順 'order' => 'ASC', // 並び順。「ASC（降順）」 'numberposts' => 500 ]; ?> <div class="container artiste-list-container"> <div class="row"> <?php // Artisteのカテゴリーの記事すべてを表示する $custom_posts = get_posts($args); foreach ( $custom_posts as $post ): setup_postdata($post); ?> <div class="col-12 col-sm-6 col-md-4 col-lg-3 artiste-list"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </div> <?php endforeach; ?> </div> </div>
全てのEitionをBootstrapを使ってレイアウトする
<h3>Ouvrages</h3> <div class="row"> <?php // Editionのカテゴリーの記事すべてを表示する $custom_posts = get_posts($args); foreach ( $custom_posts as $post ): setup_postdata($post); ?> <div class="col-12 col-sm-6 col-md-6 col-lg-4 edition-list"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </div> <?php endforeach; ?> </div>