【WordPress, テーマ作成】WordPressテーマ形式のPHPを書き加えていく1

28 / 03 / 2018
Category: CSS, FRONTEND, HTML, PHP, WordPress
Tags: | | | |

どうもー、ドイツでフリーランスのフロントエンドエンジニアをしています、Arisaです。

 

さて、ゆるくですがこのWordPressオリジナルテーマ作成チュートリアルシリーズは、前回は【WordPress, テーマ作成】トップページとスタイル という、テーマ作成の大まかなデザインをHTMLとCSSで作っていくということをしました。

今までのシリーズで順番にチュートリアル記事を書いていますので、順を追って確認したい場合は、以下の順でどうぞ。

 

WordPressテーマ作成チュートリアル

 

1. 【WordPress, Atom】Atomのインストール、カスタマイズ方法

2. 【WordPress, MAMP】MAMPを使ってWordPressをローカルにインストール

3. 【WordPress、テーマ作成】WordPressテーマの超基本的な構造

4. 【WordPress, テーマ作成】トップページとスタイル

5. 【WordPress, テーマ作成】WordPressテーマ形式のPHPを書き加えていく1 ←今ここ

(さらに…)

【WordPress, テーマ作成】トップページとスタイル

20 / 02 / 2018
Category: CSS, FRONTEND, HTML, WordPress
Tags: | | |

どうも、ドイツでフリーランスのフロントエンドエンジニアをしている Arisa です。

 

さて、以前「【WordPress、テーマ作成】WordPressテーマの超基本的な構造」という記事で、必要な基礎知識として、それぞれのファイルが持つ役割や、ローカル環境にインストールしたWordPressの、どこにファイルやフォルダを配置するか、ということを書きました。

今回はいよいよトップページと簡単なスタイル(デザイン)に取り掛かります。

 

ゆるくですが、WordPressテーマ作成のシリーズにしていきますので、以下の順番で進めてみてください。

 

WordPressテーマ作成チュートリアル

 

1. 【WordPress, Atom】Atomのインストール、カスタマイズ方法

2. 【WordPress, MAMP】MAMPを使ってWordPressをローカルにインストール

3. 【WordPress、テーマ作成】WordPressテーマの超基本的な構造

4. 【WordPress, テーマ作成】トップページとスタイル ←今ここ 

(さらに…)

【WordPress、テーマ作成】WordPressテーマの超基本的な構造

5 / 01 / 2018
Category: FRONTEND, HTML, PHP, WordPress
Tags: | | |

こんにちは、フリーランスのフロントエンドエンジニア、Arisa (Schabibi) です。

ドイツでのフリーランスビザ申請を開始しましたが、言語のサポートが一番必要なのに、付き添いをお願いしても「自分一人で行け」とパートナーが消極的すぎて、日本でフリーランスしようかなと思い始めたこの頃です 笑

それはさておき、今回の記事はWordPressのオリジナルテーマ作成時に知っておく必要のある、テーマファイルの構造についてです (:

 

テーマファイルの構造を理解してテーマを作成すると、効率よく必要な機能が引き出せるテーマになります。

WordPress(PHP)のファイル構造の仕組みは、ファイル数が多く、難しいイメージを持ちやすいのですが、要するに 必要な機能を必要な時に該当ファイルから引っ張ってくるために、ファイルを分けている と理解しておけば初めのうちは大丈夫です。

 

今回の記事はWordPressでオリジナルテーマを作成する事前の予備知識なので、これからテーマを作成する人も、作成中の人も参考にしていただければ嬉しいです。

(※  超基礎ということなので、難しい概要や、あまり使用頻度のないファイルはできるだけ省いています。プログラミング初心者の人を対象にした内容です。)

(さらに…)

【JavaScript, jQuery】Typed.js Tutorial, Source Code Included

18 / 12 / 2017
Category: ENGLISH, FRONTEND, HTML, JavaScript, jQuery
Tags: | | |

Hiya, it’s Arisa (Schabibi), a freelance Frontend Developer from Japan, and living in Germany.

Many websites use animations.

One of my favorite animation is the one using  Typed.js.

 

I also applied on my portfolio website.

It’s an animation effect makes some text looks like somebody is texting on the web page.

But sometimes, it causes an error like text cursor is not showing or the cursor goes somewhere.

That’s what most people asking and I also went through that common issue.

Today, I wanna leave a note to show one of the samples to make Typed.js works well with a sample code.

(さらに…)

【WordPress, PHP】プラグインなし!新着記事をサムネイル画像付きで表示させる方法

7 / 12 / 2017
Category: CSS, FRONTEND, HTML, PHP, WordPress
Tags: | | | |

こんにちは、フリーランスのフロントエンドエンジニアの Arisa (Schabibi) です (:

最近このブログのテーマを改良していることもあって、忘れないうちに実装したことを書いています。

 

今日はプラグインを使わずに新着記事をサムネイル画像付きでサイドバーに表示させる方法です。

WordPressでオリジナルのテーマを作成している場合は特に役立つ情報なんじゃないかと思います。

既存テーマでもプラグインを軽くしたい場合には使えるので参考にしてみてください。

 

(さらに…)