初心者の癖に初心者向けにWordPress教えるよ、勢いだけで!その1

投稿者:

あずまです。

WordPressといえばまさに旬…をやや過ぎてるかもしれませんが

マークアップエンジニアにとっては一番の畑です。

私含め、駆け出しエンジニアの方も手を出して損のないフィールドと言えるでしょう。

でもWordpressって何やっていいかわかんない…って思ってるひと!

あずまはこれをおすすめしますよ!

この記事を読むのに必要な持ち物

・HTML/CSS できる

・wordpressのインストールしたサーバー ある

テーマを改造して自分のPFを作ろう!

駆け出しエンジニアの人、大体どっかしらのタイミングでPFつくるでしょ?

何、bootstrap?そんなやつは帰れ!

あいつも、あの娘も、あの先輩も、みんなみんなPFはおんなじ格好やんけ!

と言うことで、WordpressでPF作っとくと

問い合わせフォームとかの実装も楽だしブログも書ける。

なんなら下層のレイアウトに飽きたらテーマごと変えるってのもできるよ!

ちなみにPHPの知識はひとまず要らないよ。

J-POPでの英語の歌詞位の存在感だね。

では、どうすればいいか言いますね。

  • 普通にHTML/CSSでつくる
  • ちょっとした所を書き直す
  • アップロード
  • バグ取り

か、簡単かも!これで他の参加者との差がつくのか!

ではひとつずついきましょう。

あ、もしかして漏れとか間違いあるかもしれないから

上手くいかない場合はほかのわかりやすいサイトを検索してね!

普通にHTML/CSSでつくる

とりあえずトップページをいつもどおり作ろう!
デザイン考えるのは大変だけどそこは何とか紙にペンでワイヤー書けばなんとかなるでしょ。
なんとなくいい感じのサイトを作ってね!名刺代わりのしゅっとしたやつを。

でもjsやJqは使わないでね、その後の事が大変だからね!
まぁでも自走できるエンジニアなら調べながら行けるけど

自分のサイトなんて後から足せばいいんだから
とりあえずレイアウト当たってたらここではおっけー!

ちょっとしたところを、なおす

なんといらないと言っていたphpが出てくるんだけど。
WordPressはどうもphpで出来てるんだよね!

でも細かいことは気にしない!
いじるとこ決まってるんだから見ながらやっていこう。

何回もやっていったらそのうちわかってくるよ
なんせ言語だからさ。使ってるうちに話せるようになる。

直すところはズバリリンクのみ!

飛ばすリンクと画像の指定だね!

あとCSSのファイルの名前なんだけどstyle.cssだったら違うのに変えよう!
ついでにhtmlはhome.phpに名前を変えてね!

それと足さなきゃいけないコードが少しあるから、置いとくからそれも足してね!

ここから説明

まずリンクはイチイチPHPになるよ!項目別に置いとくからコピペして使ってね!

CSS指定するとき

<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/〇〇.css” type=”text/css” />

画像指定するとき

<img src=”<?php echo get_stylesheet_directory_uri(); ?>/img/top.png”>

わかると思うけどimgはフォルダです。別に入れなくてもいいけど私は入れる。

飛ぶリンクの奴

絶対リンク→ふつうでいい

相対リンク→<a href=”/index.php?page_id=〇〇”>

idの部分はWPの編集ページでページタイトルの上にカーソルを置くと出てくる。

あとついでにやってほしい事

お決まりの文言を入れといてください。

拝啓、敬具みたいなもんです。

<?php wp_head(); ?>(/headの直前)

<?php wp_footer(); ?>(/bodyの直前)

アップロード

できたらアップロードだよ!
テーマの入ってるフォルダに入れよう。

画像は私はフォルダごといっとくよ。

フォルダはここ

/ドメイン/public_html/wp-content/themes/使うテーマ名/ここ!

もともとのhome.phpとかindex.phpとかがあるからわかると思う。

CSSと画像フォルダもここでいい。

バグ取り

テーマにもよるけど、
もともとstyleを指定してる親分みたいなcssファイルがあるから

そいつがhとかaとかに口出してくる可能性があるよ。
その名もstyle.css。

まぁ、仕方ないから崩れた部分は普通になおそう!

classつけたりすれば出来るでしょう。

さて、これでトップページは自分のデザインで表示できたと思う。
リンクが上手く晴れてたらブログ記事とかはテーマのデザインになってると思うよ!

下層もこだわりなければ固定ページでいいでしょ、めんどくさいし。
ダッシュボードのところから編集したら。

ここまで出来たらあなたもwordpressのテーマを改造してPF作った人!
提案先増えるよすごく!多分ね。

まだまだwordpressには出来ることがある…
っていうか全然wordpressの本領は発揮されてないから

もう少し先の事はまた記事にするよ。

よろしくね!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です