おっきー

web制作の知識(主にHTML,css,js,WordPress)をアウトプットとして…

おっきー

web制作の知識(主にHTML,css,js,WordPress)をアウトプットとして記しています 駆け出しなので本記事の内容を鵜呑みにせずしっかり自分で調べてから実装していただければと思います

記事一覧

【WordPress正規移行手順さくらインターネットver】

ローカルで開発したWordPressのサイトをサーバー上(さくら)へ移行する手順の覚書です。 (順番はこの通りでなくても良い) 初めに移行元のデータベースをエクスポートしてお…

おっきー
3年前
1

【HTML CSS】画像ホバーエフェクト

いろんなサイトで見かける画像エリアをホバーしたときにリンクですよってのを視覚的にわかりやすくするエフェクトですが、無難なもので言うと単に透過させるだけですがこれ…

おっきー
3年前
1

【WordPress】関連記事表示プラグイン無し

投稿の詳細ページなどで記事の終わりによくある関連記事の表示。 プラグインで実装することが多いそうですが簡単そうだったので自作してみます。 <?php $category = g…

おっきー
3年前

【HTML CSS】親要素から飛び出させる

コンテンツ幅のMAXを指定していて中の要素はコンテンツ幅に合わせたいけど背景だけはウィンドウ幅100%に広げたい時がたまにあると思います。 そゆ時は幅に100vwなどを使っ…

おっきー
3年前
2

【jQuery】data関数について

最近モーダルなどのコーディングをする際にHTML5のdata関数なるものを使ったんですがこれがまたお便利だったので書いておきます。 data関数とは html5で追加されたdata関…

おっきー
3年前

タームにカスタムフィールドで設定した画像を表示させる方法

ターム編集画面にカスタムフィールドで設定しその画像をタームのサムネイル画像としてループ内で表示したいときの表示方法です <?php $terms = get_terms('brand');?> …

おっきー
3年前

タクソノミーアーカイブで子タームとそれに紐づく投稿を表示

カスタム投稿「work」を作り、そのタクソノミー「genre」にタームをいくつか追加していきます。 「taxonomy-genre.php」にてターム「親」直下の「子」とゆうターム情報を表…

おっきー
3年前

calc関数

calc関数最近になってようやく使い方が少しわかるようになり その便利さに気付きましたが、最初見たときはそりゃまあ意味不明でした。 だって関数って名前ついてるし???…

おっきー
3年前
1

functions.phpにてcssやjsファイルを読み込む

CSSファイルやjsファイルを読み込む際に通常(WordPressを使用しないサイト)であればHTMLの<head>タグ内で読み込むと思います。 ですが、WordPressを用いたサイトであれば<h…

おっきー
3年前

jQueryをCDNで読みこむ

「jQueryってCDNで読み込むの?そもそもCDNって何?ダウンロードしてから読み込むのと何が違うの?その記述はheadタグ内なの?</body>の直前なの?」 上記の質問を友人…

おっきー
3年前
1

WordPressのループ中に記事数に応じて数字を付与していく(?)

お題の通り、例えばECサイトなどで商品をピックアップしてランキング形式で表示する時に1位、2位、3位。。とゆう風に数字を順番につけていくと思います。 死ぬほどシンプ…

おっきー
3年前

WordPressサブループにて5件特定のカテゴリ記事を表示。(素人)

※下記内容はWordPressについて勉強中の素人が覚え書きで綴る程度ですので悪しからず。 皆さん、WordPressを使ってサイト制作をしている時に良くある事例として トップペ…

おっきー
3年前

【WordPress正規移行手順さくらインターネットver】

ローカルで開発したWordPressのサイトをサーバー上(さくら)へ移行する手順の覚書です。
(順番はこの通りでなくても良い)

初めに移行元のデータベースをエクスポートしておきます
さくらのコンパネへログインし、データベースを新規作成します。
Webサイト/データ->データベース->新規追加

データベースを作成したら移行元からエクスポートしたDB一式をインポートします。
その後サーバー上のドメ

もっとみる

【HTML CSS】画像ホバーエフェクト

いろんなサイトで見かける画像エリアをホバーしたときにリンクですよってのを視覚的にわかりやすくするエフェクトですが、無難なもので言うと単に透過させるだけですがこれだと味気ないのでよくあるのが画像にホバーすると少し画像だけがズームアップするエフェクトです
cssだけで簡単に出来ます。

<a class="zoom" href="#"> <img src="hogehoge.jpg" alt="

もっとみる

【WordPress】関連記事表示プラグイン無し

投稿の詳細ページなどで記事の終わりによくある関連記事の表示。
プラグインで実装することが多いそうですが簡単そうだったので自作してみます。

<?php $category = get_the_category(); $cat_ids = array(); foreach ($category as $cat) { $cat_ids[] = $cat->term_id

もっとみる

【HTML CSS】親要素から飛び出させる

コンテンツ幅のMAXを指定していて中の要素はコンテンツ幅に合わせたいけど背景だけはウィンドウ幅100%に広げたい時がたまにあると思います。
そゆ時は幅に100vwなどを使ってあげるとよき。

グレーの背景部分をウィンドウ幅いっぱいに広げる感じ。

width: 100vw;の時点では右側だけ飛びてていてそこからコンテンツ幅の50%分のmarginをとり、さらにそこから50vwを引くって感じの動き!

もっとみる

【jQuery】data関数について

最近モーダルなどのコーディングをする際にHTML5のdata関数なるものを使ったんですがこれがまたお便利だったので書いておきます。

data関数とは
html5で追加されたdata関数とは主にjQueryなどで値を取得したり変更したりできる属性のことです

<a href="#" class="js-close-btn" data-target=".target-modal">

このようにda

もっとみる

タームにカスタムフィールドで設定した画像を表示させる方法

ターム編集画面にカスタムフィールドで設定しその画像をタームのサムネイル画像としてループ内で表示したいときの表示方法です

<?php $terms = get_terms('brand');?> <?php foreach($terms as $term): ?> <?php $image = get_field('taxonomy-thumbnail', $term); ?>//(

もっとみる

タクソノミーアーカイブで子タームとそれに紐づく投稿を表示

カスタム投稿「work」を作り、そのタクソノミー「genre」にタームをいくつか追加していきます。
「taxonomy-genre.php」にてターム「親」直下の「子」とゆうターム情報を表示し投稿も表示するとゆう作業をしたので備忘録として。。。

「この赤枠の名前と説明を表示したい!!!!」

早速コードですがtaxonomy-genre.phpで以下で子ターム情報を取得します

<?php $t

もっとみる

calc関数

calc関数最近になってようやく使い方が少しわかるようになり
その便利さに気付きましたが、最初見たときはそりゃまあ意味不明でした。
だって関数って名前ついてるし?????でした。

僕個人として良く使う場面としては、良くあるカード型レイアウトです。
↓こんなの

僕は普段こういったレイアウトの時はBootStrapのグリッドシステムを使用するのですが(col-〇〇)、上記画像の最後の5カラムの時に

もっとみる

functions.phpにてcssやjsファイルを読み込む

CSSファイルやjsファイルを読み込む際に通常(WordPressを使用しないサイト)であればHTMLの<head>タグ内で読み込むと思います。
ですが、WordPressを用いたサイトであれば<head>タグ内で読み込むことも可能ですがそれはあまり好ましくないようです。
以下公式引用

『ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください。代わりにテーマ関数のアクションフック

もっとみる

jQueryをCDNで読みこむ



「jQueryってCDNで読み込むの?そもそもCDNって何?ダウンロードしてから読み込むのと何が違うの?その記述はheadタグ内なの?</body>の直前なの?」

上記の質問を友人に聞かれたのでそれに対するアンサー兼備忘録として記しておきます。

ファイルをダウンロードしてきて読みこむ方法まずjQueryを使えるようにするようには公式ページより必要なバージョンのフォルダ類をダウンロードしてき

もっとみる

WordPressのループ中に記事数に応じて数字を付与していく(?)

お題の通り、例えばECサイトなどで商品をピックアップしてランキング形式で表示する時に1位、2位、3位。。とゆう風に数字を順番につけていくと思います。

死ぬほどシンプルだし簡単だと思いますが僕は間抜けなので悩んでいるところを先輩エンジニアの方にさささっと教えて頂きました(まじ凄い)。

<?php if ($query->have_posts()) : ?><?php $count = 1; ?>

もっとみる

WordPressサブループにて5件特定のカテゴリ記事を表示。(素人)

※下記内容はWordPressについて勉強中の素人が覚え書きで綴る程度ですので悪しからず。

皆さん、WordPressを使ってサイト制作をしている時に良くある事例として
トップページや固定ページで、あるカテゴリに属している記事や商品をおすすめやピックアップとして5件程載せたい時ってありますよね。大抵のECサイトやコーポレートサイトはそのようになっています。

私も仕事でそれを使ったので忘れないよ

もっとみる