Advanced Custom Fields i WordPress

Wordpress

När man lämnat bakdragna drag-and-drop-verktyg bakom sig och börjat se på WordPress som ett seriöst CMS, är Advanced Custom Fields (ACF) ett av de mest kraftfulla verktygen i arsenalen.

Och nej, vi pratar inte om att klicka runt i wp-admin – vi pratar om att registrera fält via PHP, versionshantera dem i Git, och bygga block som faktiskt känns native i blockeditorn.

ACF via PHP

Genom att definiera dina fältgrupper med acf_add_local_field_group() slipper du den ömtåliga JSON-syncen mellan databasen och projektfiler. Dina fält hamnar direkt i koden där de hör hemma – versionerade, testbara och lätta att deploya.

<?php
if ( function_exists( 'acf_add_local_field_group' ) ) {
	$fields = [
		[
			'key' => 'field_fallback_image_tab',
			'name' => 'fallback_image_tab',
			'label' => esc_html__( 'Choose a fallback image', 'wptheme' ),
			'type' => 'tab',
		],
		[
			'key' => 'field_fallback_image',
			'name' => 'fallback_image',
			'label' => esc_html__( 'Choose image', 'wptheme' ),
			'type' => 'image',
			'preview_size' => 'medium',
			'required' => 1,
		],
	];

	$location = [
		[
			[
				'param' => 'options_page',
				'operator' => '==',
				'value' => 'acf-options-image-properties',
			],
		],
	];

	acf_add_local_field_group(
		[
			'key' => 'image_properties_group',
			'title' => esc_html__( 'Image Properties', 'wptheme' ),
			'fields' => $fields,
			'location' => $location,
		]
	);
}

Vill du lägga till logik för conditional fields, repeater-loops, relationer? Gå loss. ACF’s PHP API är stabilt, dokumenterat, och du slipper konstant ”exportera om JSON-filen för att den glömdes i staging”.

Blockutveckling med ACF

Med acf_register_block_type() kan du skapa anpassade block för Gutenberg-editorn, utan att behöva sätta upp en fullständig React-miljö. Du behåller all kontroll, skriver block i PHP/HTML, och kan skräddarsy både funktion och utseende.

<?php
add_action(
	'acf/init',
	function () {
		acf_register_block_type(
			[
				'name' => 'image-mosaic',
				'title' => esc_html__( 'Image mosaic with 4 images', 'wptheme' ),
				'description' => esc_html__( 'Build your own image mosaic. You always have to use 4 images and choose the design that works for you.', 'wptheme' ),
				'render_template' => get_template_directory() . '/components/image-mosaic/image-mosaic.php',
				'supports' => [
					'align_content' => false,
					'align' => false,
					'jsx' => true,
					'mode'   => false,
					'anchor' => true,
				],
				'example' => [
					'attributes' => [
						'mode' => 'preview',
						'data' => [
							'preview_image_image_mosaic' => '/components/image-mosaic/image-mosaic-preview.png',
							'is_preview' => true,
						],
					],
				],
				'icon' => 'align-pull-right',
				'keywords' => array( 'text', 'content', 'image' ),
				'category' => 'my-block-category',
			]
		);

		$fields = [
			[
				'key' => 'field_image_mosaic_design',
				'name' => 'image_mosaic_design',
				'label' => esc_html__( 'Choose design', 'wptheme' ),
				'type' => 'radio',
				'allow_null' => 0,
				'choices' => [
					'design-1' => esc_html__( 'Design 1', 'wptheme' ),
					'design-2' => esc_html__( 'Design 2', 'wptheme' ),
					'design-3' => esc_html__( 'Design 3', 'wptheme' ),
					'design-4' => esc_html__( 'Design 4', 'wptheme' ),
					'design-5' => esc_html__( 'Design 5', 'wptheme' ),
				],
				'default_value' => 'design-1',
				'return_format' => 'value',
				'ui' => 1,
			],
			[
				'key' => 'field_image_mosaic_image_repeater',
				'name' => 'image_mosaic_image_repeater',
				'label' => esc_html__( 'Images', 'wptheme' ),
				'button_label' => esc_html__( 'Add images', 'wptheme' ),
				'type' => 'repeater',
				'layout' => 'block',
				'min' => 4,
				'max' => 4,
				'required' => 1,
				'sub_fields' => [
					[
						'key' => 'field_image_mosaic_image_repeater_img',
						'name' => 'image_mosaic_image_repeater_img',
						'label' => esc_html__( 'Choose image', 'wptheme' ),
						'type' => 'image',
						'preview_size' => 'thumbnail',
					],
				],
			],
		];

		$location = [
			[
				'param' => 'block',
				'operator' => '==',
				'value' => 'acf/image-mosaic',
			],
		];

		acf_add_local_field_group(
			[
				'key' => 'field_block_image_mosaic',
				'title' => esc_html__( 'Image mosaic with 4 images', 'wptheme' ),
				'fields' => $fields,
				'location' => $location,
			]
		);
	}
);

Det ger dig möjlighet att skapa fullt anpassade block – med alla fördelar som kommer med WordPress native-funktionalitet.

Därför fortsätter ACF att vara ett självklart val

Strukturerad datamodellering: ACF gör det enkelt att bygga informationsmodeller som speglar innehållets logik, oavsett om det gäller enkla fält eller avancerade repeater fields.
Fullständig kontroll över frontend: Du styr själv exakt hur innehållet presenteras – inga överraskningar i markup eller styling.
Brett stöd i communityn: ACF är ett etablerat verktyg i WordPress-världen med ett stort användarstöd och hög kompatibilitet.

Sammanfattning

ACF är ett värdefullt verktyg för utvecklare som vill bygga professionella, skalbara och välstrukturerade WordPress-lösningar. Genom att arbeta med fältdefinitioner i PHP får du full kontroll över både logik och implementation – utan att kompromissa med kodkvalitet eller utvecklingsflöde.