Web Design Articles

こんにちは、のすけです。WordPressを弄っていると、独自のCSSやJavascriptを使って整えたくなってきますよね。そんなCSSやJSを作成して変更する方法を紹介します。(デザインについては特に触れません) 簡単だけど諸刃の剣な方法 概要 書き方 CSSやJavascriptの置き場所 置いたスクリプトをWordPressで読み込むように登録する 簡単だけど諸刃の剣な方法 一番簡単な手法としては、管理画面の[外観] - [CSS編集]からCSSについては編集できます。テーマのCSS編集この画面では、CSSの変更結果を微調整しながらカキカキできるのが利点で、とても便利なのです。プレビューを確認しながら変更できるので便利ではありますその他の手法として、[外観]-[テーマ編集]からテーマの「style.css」に追記数する手法もあります。style.cssはテーマ用なので別ファイルで管理したいしかし、問題もあります。 このCSSはテーマの設定値として紐づいているので、テーマを変えると消えてしまいますし テーマのアップデートで消えてしまったこともあります。 また、テーマ編集については、そもそもこの画面から編集するのは危険です。間違ってからのテキストデータがPOSTされた場合全て消えてしまう可能性もあります。(一度ありました。) 膨大な時間を掛けて構築したCSSが消えてしまうと、もう呆然となってしまいます。。 そのため、Web一般で用いられているように、外部ファイルとして保存されたCSSやJavascriptを利用して編集する手法を取りたいと思います。ローカルにソースファイルを保持できるので、万が一サーバー上のファイルが消えても復旧可能なので、やはりこっちの方がしっくりきます。 またbootstrapなどの任意のCSSフレームワークを入れたいなんて要望もあるかと思います。 概要 やり方の概要としては「wp enqueue script」関数を利用して、登録を行います。 header.phpに直接書くやり方ももちろんありますが、WordPressの機能を利用して登録していくのが一般的なようです。 関数リファレンス/wp enqueue script - WordPress Codex 日本語版 書き方 以下のように、functions.phpの最後の行に追記します。なお、編集する際にはコピーを取って戻せるようにしてください。 間違って記述するとサイトが動かなくなります。書き方例： /** * スクリプトとスタイルを正しくエンキューする方法 */ function load_my_scripts1() { wp_enqueue_style( 'mystyle1', 'url' ); wp_enqueue_script( 'mystyle2', 'url', array(), '1.0.0', true ); } [...]

こんにちは、今回はWordPressのアーカイブ機能カスタマイズしていきます。 アーカイブ表示とは？ アーカイブページは「archive.php」を作れば良い アーカイブページのタイトル 個別投稿ページへのリンク 記事の抜粋 ページング カスタム投稿タイプにも一覧機能をつけたい WP_Queryでカスタム投稿を取り出す！ アーカイブ表示とは？ そもそも、アーカイブ機能とは何でしょうか？投稿や固定ページとは違ってあまり馴染みのない機能なのではないでしょうか。 でも、実は重要です。 アーカイブとは記事を一覧表示する機能なので、投稿一覧をいい感じに作ることができるものです。 例えば通常、カテゴリーをクリックした際に、そのカテゴリーに属する記事が一覧で表示されると思いますが、そのページがアーカイブページになります。 カテゴリーの他にも、タグや、日付(日別・月別・年別)での結果もアーカイブページになります。 カスタム投稿タイプで新しく別の投稿タイプを作成した時に、それぞれ別のレイアウトの一覧ページを作りたい！なんて要望もあると思います。 例えば通常はリスト表示が多いのですが、これをグリッド形式にしてアルファブログにあるような形に整形することも可能です。 アーカイブページは「archive.php」を作れば良い それではアーカイブページを作っていきます。 と言っても、アーカイブページの作り方は、固定ページや投稿ページと同じです。 WordPressループを利用し、テンプレートタグを使って必要な情報を揃えていけば良いだけです。 まずは、いつもの基本的な記述で作ってみましょう。 archive.php <?php get_header(); ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <h1 class="entry-title"><?php the_title() ?></h1> <div> <?php the_content(); ?> [...]