前提

  • WordPressの有料テーマ(Enfold)を使っている
  • Enfoldを子テーマを有効化して運用している

上記が異なる場合、ディレクトリの名前などが異なる可能性があります。

有料テーマEnfoldのAvia Layout Builderに独自のContent Elementsを追加する方法

Enfoldのテーマ内の下記に移動

/config-templatebuilder/avia-shortcodes/

ここに、Content Elements のコードが入っているので、作成したい機能に最も近いものをフォルダごとコピーする。

次に子テーマに、下記のディレクトリを追加して、親テーマからコピーしたファイルを設置する

/config-templatebuilder/avia-shortcodes/(eg)blog

つぎに、フォルダ名と中のファイル名をすべて独自のものに変える

/config-templatebuilder/avia-shortcodes/custompost
/config-templatebuilder/avia-shortcodes/custompost/blog_custompost.php
/config-templatebuilder/avia-shortcodes/custompost/blog_custompost.css

blog_custompost.php を開いて、以下を修正する

<?php
/**
 * Blog Posts Custom Post
 *
 * Displays Posts from your Blog
 */
if ( ! defined( 'ABSPATH' ) ) {  exit;  }    // Exit if accessed directly


// if ( ! class_exists( 'avia_sc_blog' ) ) // 削除
if ( ! class_exists( 'avia_sc_custompost' ) ) // 追加
{
	// class avia_sc_blog extends aviaShortcodeTemplate // 削除
	class avia_sc_custompost extends aviaShortcodeTemplate // 追加
	{
....
				// $this->config['shortcode'] 	= 'av_blog'; // 削除
				$this->config['shortcode'] 	= 'av_custompost'; // 追加
....
				// wp_enqueue_style( 'avia-module-blog' , AviaBuilder::$path['pluginUrlRoot'].'avia-shortcodes/blog/blog.css' , array('avia-layout'), false ); // 削除
				$template_url = get_stylesheet_directory(); // 追加
				wp_enqueue_style( 'avia-module-custompost' , $template_url.'/config-templatebuilder/avia-shortcodes/blog_custompost/blog_custompost.css' , array('avia-layout'), false ); // 追加

....


				if( is_single() || ( 'get_pagenum_link' == $method ) )
				{
					// $method = 'avia_sc_blog::add_blog_pageing'; // 削除
					$method = 'avia_sc_custompost::add_blog_pageing'; // 追加
				}

次に、子テーマの functions.php に以下を追加

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/config-templatebuilder/avia-shortcodes/');

  return $paths;
}

これで Content Elements に独自の要素が追加される。

あとは、blog_custompost.php の設定やらを編集して好きな形に変更するだけ。

 

下記、参考にさせていただいたページ、サイト

Intro to layout builder

Add Custom Element in Enfold Avia Layout Builder

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください