WordPress勉強会 Day02

勉強会授業後の確認資料です。

HTMLサイトをWordPressにする本をベースに進めています。
私は普段このやり方でWPのサイトを構築していません。
この本では一度静的サイトを構築してからWordPress化していますが通常業務であればそこはなくデザインの後すぐにWordPressを構築に入っています。何のテーマかというのは後ほど。

今回はデジハリで卒制が終わった後WordPress化したいという要望が多く、その流れでできるようにと著者の先生方がご教示していただいているのだと思います。とてもありがたいです!

授業内容

p89-90

固定ページの中身を書き換える

index.phpの中身(元々はprivacy-policyのhtmlファイル)を実際のprivacy-policyページにコピペ。
ここではコードエディタとビジュアルエディタという切り替えがあることを知っておいてほしい。
もう一つはリンクを「privacy」に変更しています。こちらは後々説明ありますが「content: attr(data-title);」のcssで表示させるときに関係していきます。

p91

初めての条件分岐を書いてみる!

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        この中の処理

     <?php endwhile; ?>
 <?php endif; ?>

もし投稿があったら、投稿が無くなるまで
「この中の処理」を
してください。
以上!という意味です。
これからどんどん出てきます。

p92

パンくずを設定していく。

今回は「Breadcrumb NavXT」というプラグインで今回は設定していきます。

作業する度に画面を確認をしてくださいね!

p104-105

index.phpを分岐コードに切り替える

<?php if(is_page('privacy')): ?>
    <h1 data-title="Privacy Policy" class="page-title"><?php the_title(); ?></h1>
<?php else: ?>
    <h1 data-title="<?php echo ucwords($post->post_name); ?>" class="page-title"><?php the_title(); ?></h1>
<?php endif; ?>

<?php if(is_page(‘privacy’)): ?>もし’privacy’ページだったら

<?php else: ?>そうじゃなかったら

<?php endif; ?>if文終了!!


p106-p120は一旦飛ばしました。

p123

single.phpを作成(single.phpは各記事の時(個別ページ)に使用されるphpファイルです)

Show Current Template – WordPress プラグイン
こちらを入れているので投稿ページを見てどのファイルを使用しているかも確認しましょう!

p124 またまた分岐!

画像をクリックしたら拡大して出るlight boxをシングルページの場合読み込ませたいので


<?php if(is_single()): ?>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">
<?php endif; ?>

p128 sideber.phpの設定
asideの中身をsideber.phpにコピペして尚且つ
投稿年

<ul class="sidebar-list">
  <?php wp_get_archives('type=yearly'); ?>
</ul>

カテゴリー

 <ul class="sidebar-list">
 <?php wp_list_categories('title_li='); ?>
</ul>

上記のコードに書き換える。p130-131を参考に読む

p132-133

これから何度も出てくるヘッダー、フッター、サイドバーを読み込む
これは覚えましょ!!!

ヘッダーを読み込む!

<?php get_header(); ?>

<main>タグのの中にメインループを書きます〜
この間をぐるぐるwhile文のなかで繰り返します。

/*メインループを開始するコード*/
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
ループの中身をここに書きます!!
<?php endwhile; ?>
<?php endif; ?>

p133の17行目から〜カテゴリーを表示するための foreach文!!
カテゴリーが存在する間カテゴリーを表示します!

/*カテゴリーリスト*/   
<?php 
$cats = get_the_category();
if($cats):
?>
    <ul class="cat-list">
    <?php foreach($cats as $cat): ?>
        <li><?php echo $cat->name; ?></li>
    <?php endforeach; ?>
    </ul>
<?php endif; ?>     

タイトルの表示!これも本当によくでます!

<?php the_title(); ?>

アイキャッチを表示するコード

<?php if(has_post_thumbnail()): ?>
<figure class="eyecatch">
    <?php the_post_thumbnail('full'); ?>
</figure>
<?php endif; ?>

フッターを表示するコード

<?php get_footer(); ?>

WordPressではファイル名のスペルを間違えるとNGなものが多いです。
もう決まっているファイル名!
header.phpとかfooter.phpとか
この辺りは絶対このままで!

p136-137 functions.phpを作成します!

デフォルトのテンプレートなどは選んだ時からアイキャッチを入れることができるのですが今回はこちらのfunctions.phpを書かないとアイキャッチを選ぶということができません。お気をつけて!

ここまでやったらエクスポートして提出でした。

WordPress勉強会 Day01

勉強会授業後の確認資料です。

HTMLサイトをWordPressにする本をベースに進めています。
私は普段このやり方でWPのサイトを構築していません。
この本では一度静的サイトを構築してからWordPress化していますが通常業務であればそこはなくデザインの後すぐにWordPressを構築に入っています。何のテーマかというのは後ほど。

今回はデジハリで卒制が終わった後WordPress化したいという要望が多く、その流れでできるようにと著者の先生方がご教示していただいているのだと思います。とてもありがたいです!

宿題

localをインストールしてくること
https://localwp.com/

・localのダウンロード
https://localwp.com

・「HTMLサイトをWordPressにする」本のデータをダウンロード

・Visual Studio Code ダウンロード使えるように
https://code.visualstudio.com/download

授業内容

p35-44
Localインストールとサイトの作成

p18

既存テーマとオリジナルテーマ

今回はオリジナルテーマを作ります。
既存のテーマで有名なもの

  • swell
  • lightning
  • Snow Monkey 
  • Twenty Twentyシリーズ
  • ワードプレステーマ TCD
  • Cocoonなどなど

ブロックテーマとクラッシックテーマ

よくブロックエディタとブロックテーマを混在してる方がいますが全く違っていてこれはテーマの話。以前からあったクラッシックテーマはPHPでガリっと作っていきます。
PHP知識が必要ですが自由度が高い。
ブロックテーマは、ビジュアルエディタで簡単にカスタマイズできる、
文字にすると説明するのが難しいですね。
ちなみに上で出てきた以下はクラッシックテーマです。

  • swell
  • lightning
  • Snow Monkey 
  • cocoon

以下はテーマによります。

  • Twenty Twentyシリーズ
  • ワードプレステーマ TCD

ブロックエディタとクラッシックエディタ


・ブロックエディタとクラッシックエディタ

ここがわかりづらい、、またブロック?クラッシック??
ここは実際に記事やページを書くときの作りかな。私は長年クラッシックエディタを使っていたから最初はブロックエディタが本当に使いづらくてプラグインでClassic Editorというプラグインを使っていましたが、慣れるとなんて便利なんでしょう〜〜〜
選べば素敵なギャラリーやタイトルとテキストなんかが作れてしまいます。
でもこれから皆さんがいろんなサイトに関わっていくにあたりクラッシックエディタのところもまだまだあるので知っておいた方良いと思います。

ここでは実際のサイトの管理画面を見てもらいました。


ちなみに私は今まで[underscore]というテーマを使ってオリジナルを作ってました。SnowMonkeyやswellというテーマも使ってみたいと思いつつ、underscoreの自由度も好きなので使い分けしていけるのが私的には理想です。

p25-26

今回作成するサイトの構成説明。

p31

WordPressってファイル名がかなり大事!
なんとなくつけてしまったファイル名が予約語だと後からめんどいです。
31に掲載されているのは使わないでね。

p56-57

全体のサイトの確認

p64-67

プラグインがたくさんありますがまずは以下をインストールして有効化

  • All-in-One WP Migration これがないと
    ローカルとリモートでのファイルのやり取りやバックアップ
  • Show Current Template
    最初どのPHPに書いてるのかわからなかったのでこれを使えばバッチリ!
  • WP Multibyte Patch
    日本語サイトならこちらはぜひ

p68-70

管理画面の設定をしていきます。
テキストの流れで恩田いないのですが1点。
WordPress初期設定の「?p=123」よりも「setup-permalink」のような意味のある単語を使ったURLが良い!
Googleはハイフンを推奨し、アンダースコアを非推奨 google推奨だと以下になります。
/%category%/%postname%/
今回はテキスト通りで/%post_id%/でいきましょう。
/%category%/%postname%/にするデメリットはクライアントさんが更新する場合タイトル名に日本語入れてそのままにするとURLが変な文字の入ったものになります。

p78-94

記載通りにコピペをして進めました。

授業で紹介するサイト-忘備録

デザイン

SANKOU!
https://sankoudesign.com/


I/O 3000
https://io3000.com/

S5 style
https://www.s5-style.com/
MUUUUU.ORG
https://muuuuu.org/


Web Design Clip
https://www.webdesignclip.com/

awwwards
https://www.awwwards.com/


Minimal Gallery
https://minimal.gallery/


Web Design Clip
https://lp.webdesignclip.com/


LPアーカイブ
https://rdlp.jp/lp-archive

Responsive Web Design JP
http://responsive-jp.com/

便利サイト

ML5 入れ子チートシート
https://yoshikawaweb.com/element/

shopify 調べた忘備録

マルチカラムの画像にデフォルトではリンクが貼れない。見出しと説明にはリンクが貼れる。
画像にリンクが貼りたい!
ここで解決

  • コード編集
  • 『multicolumn.liquid』と検索
  • ファイル内で『<div class=”multicolumn-card content-container”>』を検索
  • その上に以下を記入
{%- if block.settings.link_label == blank and block.settings.link != blank -%}
  <a href="{{ block.settings.link }}">
{%- endif -%}

PHP7.4→8.3にしたらエラーが・・・

今更かもですがクライアントさんからの追加オーダーの際にバックアップアンドメンテを。PHPもバージョン上げたかったのでPHP7.4→8.3に。すると以下のようなエラーがずらっと

Warning: Undefined variable $t_args inファイルまでのパス.php on line 42

これまだは値がなかった・・・その場合の処理が何もなかったのです。

$t_argsこの変数が問題になっているので

if(isset($t_args)){
問題の$t_argsを使っているコード
}

というように

if(isset(問題の変数名){
これまでのコード
}

とすればエラーがなくなりました。
ホ・・・

ヘテムルで最大のファイルアップロード上限を上げる時の注意

デフォルトでは100MBしか上げられない。

WordPressのデータがメディアデータ以外でも455MBあったのでこれはファイルアップロードの上限を上げなければと。
「.htaccess」の設定を書き換えてアップすれば(今回はそこも若干省略でヘテムルFTPにて直がき)問題ないのに全然増えない。。。

クライアントさんの保守でWordPressを最新に上げると同時にPHPのバージョンを上げたのですがモジュールを選んでいました。早いということなので。

それがダメだったようで。。。
CGIに一度して「.htaccess」を書き換えたら容量が増えておりました。

というわけでPHPのバージョンをCGIにするということがポイントでした。
ただこれは他のサーバーではまた違うので、、、

娘と広島 4日目-1

8時15分に黙祷から

「広島平和記念日」の朝は8時15分に黙祷から始まりました。

第三世代が考えるヒロシマ「」継ぐ展
(https://tsuguten.com/)の涼子ちゃん主催の久保田涼子のガイドで行く「夏の広島ツアー」に参加です。

広島、とっても暑い。この中街歩きは行けるのか〜不安過ぎる朝に日傘紛失するというハプニング付きで!チェックアウト作業とスーパーに娘に走って買いに行ってもらうというバタバタ。

ヒルトン広島の向いにあった「FUJI GRAND フジグラン」心強かった!

カープコーナーも充実しています。前日はこの中に入っている電光石火というお好み焼き屋さんでテイクアウトしました!(頼む方は先にオーダーした方が良いです。待ち時間があるので)

鶴見橋東詰被爆樹木シダレヤナギ・頼山陽文徳殿と巡り爆風の凄さを知る。

あまりに凄すぎてリアルな感覚がわからないがとにかく破壊力の凄さは思い知らされる。

本来のコースだと比治山陸軍墓地にこのあと行くらしいんだけど、あまりの暑さにまずは広島市現代美術館に。
https://www.hiroshima-moca.jp/

日傘とポータブル扇風機はマストだな。

広島市現代美術館は何より黒川紀章による設計ということで建物自体も面白い。たどり着いた時に最初に目にした均等に並ぶ列柱はバチカンを思い出した。念願の奈良美智さんの「Missing in Action -Girl meets Boy-」

苦しい気持ちにもなるし、この思いを忘れてはいけないと感慨深い作品でした。今年は青森美術館でも奈良さんの作品をたくさんみれて、以前霧で飛行機が飛ばず青森美術館を諦めてからのリベンジができた気がする

娘が登場してから奈良さんの作品を見る感覚が変わった気もしている。身近でもあり鋭くドキッとさせられる

ちょっと暑すぎるけど、野外彫刻も素晴らしかった。個人的には「ヒロシマ・鎮まりしものたち」が特に好き。

ここはまたゆっくりきたいと思いました。

そして歩いて「比治山陸軍墓地」
まあまあ坂道を登りたどりついた墓地からの広島の景色は解説付きでとても有意義なものになりました。広島が軍都であった歴史も知って欲しいという説明がとても印象深い。「軍都」「被爆地」両面から歴史を考える機会となりました。

figmaでの整列キーオブジェクト

またまた困ったぞ。
イラストレータでかなり使う整列。
そしてそれとセットでキーオブジェクト!!
figmaで毎回整列すると
例えば中央揃えだと
全ての中央に揃ってしまう〜

言葉で書くのは難しいな〜
要は1つ動かしたくないオブジェクトがあって
それに対して中央とか左とか右とかに整列させたい〜

悪戦苦闘中のfigma!!できない〜
というわけで
ググってググって・・
プラグインメニューから「Singari」
というのをインストールしました!

Singari | https://www.figma.com/community/plugin/1178344980565268109

最後に選んだオブジェクトがキーオブジェクトになる。

取り急ぎの私のための備忘録
今の案件が終わったら追記していきたいと思います。

Mixed Content Errorって

備忘録

かなり昔に作ったwpのサイト「Mixed Content Error」が出てなんだっけ?と
httpsとhttpが混在していました〜〜

絶対パスで書く場所なんて限られてるから、結局google fontへのパスがhttpのままだったらしい。

古いサイトあるある。
でもエラーが見つかった時はスッキリ!

画像は全く関係ありません、、、

Instagramをwebページに配置する

卒制でinstagramをwebページに配置したいというが多い。
最近はinstaからwebへの導入の方がメインでwebページからinstaに行くということはあまりないのかなと思ってたけどそれは業種にもよるし、また潜在顧客発掘になるかもしれない。

以前インスタの埋め込みをapiで連携さえてやっていたけどmetaの仕様だったり色々変更があって非表示になってしまったり。。ちょっとめんどいな〜と思っていました。

私はWPで基本サイトを作るのでトップページの表示に使っているのは
smashballoonです。
https://smashballoon.com/

とはいえ、、スクールでは卒制のときにwp化はしないので、、
簡単に表示するとしたら
SnapWidget
こちらが簡単です。見た目も良い感じ。

SnapWidget テスト

とはいえ無料というのにはやはり落とし穴が。。
instaのsnapwidgetのサイトに飛んでしまいます。
有料契約したらそれはないのですが。。。
企業サイトでアップするとなると使えないかな〜

とはいえ簡単に表示することはできるのでおすすめです