WordPress Giriş Sayfası Eklentisiz Özelleştirme

WordPress’in standart giriş sayfası işlevini yerine getiriyor ancak kurumsal bir web sitesi için oldukça sıradan görünüyor. Özellikle müşterilere yönetim paneli teslim ettiğim projelerde, giriş ekranında hâlâ WordPress logosunun ve varsayılan tasarımın bulunmasını kurumsal bütünlük açısından eksik buluyorum.

WTR Ajans web sitesini yenilerken yönetim paneli giriş ekranını da markanın renklerine, logosuna ve genel tasarım diline uygun hâle getirmek istedim.

Bu işlem için kullanılabilecek çok sayıda giriş sayfası özelleştirme eklentisi bulunuyor. Ancak web sitesindeki her küçük değişiklik için yeni bir eklenti kurmak istemediğimden, giriş ekranını özel kodla düzenlemeyi tercih ettim.

WordPress Giriş Sayfası Eklentisiz Özelleştirme
WordPress Giriş Sayfası Eklentisiz Özelleştirme

Bu yazıda WordPress giriş sayfasını:

  • Logo
  • Arka plan
  • Renkler
  • Yazılar
  • Giriş formu
  • Butonlar
  • Masaüstü ve mobil görünüm açısından eklentisiz olarak nasıl özelleştirebileceğinizi anlatacağım.

WordPress Admin Paneli Giriş Sayfasını değiştirmek istememdeki en büyük sebep, bana özel bir tasarım olması yerine neden WordPress Logosu ve çok basit bir görünüm olsun ki. Bu şekilde daha kurumsal ve güzel bir görüntü oluyor. Aynı şekilde müşterilerime de Admin Giriş bilgilerini verdiğimde onların da hoşuna gideceğini düşündüğüm hem kurumsal açıdan hemde görünüm açısından daha zengin duruyor.

Bunu yaparken kullanabileceğiniz sayısız eklenti var bir çoğu ücretsiz de iş görüyor ama her şeye eklenti kurmak web sitenizi yorar ve zamanla kafa karışıklığı oluşturur. WordPress sitelerinde en çok sorunlar gereksiz eklentilerden oluşur ve bunları temizlemek size düşer. Bu yüzden kısa ve basit bir kodlama ile bu işi sıfır sorun ile çözüyoruz.

WordPress Giriş Sayfası Neden Özelleştirilmeli?

WordPress giriş sayfasını düzenlemek için LoginPress, Custom Login Page Customizer ve benzeri eklentiler kullanılabilir. Bu eklentiler özellikle kod yazmak istemeyen kullanıcılar için pratiktir.

Ancak benim tercihim özel kod kullanmak oldu.

Bunun nedenleri:

  • Yönetim paneline yeni bir ayar ekranı eklenmemesi
  • Ek eklenti güncellemelerine ihtiyaç duyulmaması
  • Tasarımın tamamen markaya özel hazırlanabilmesi
  • Kodun yalnızca gerekli işlevleri içermesi
  • Tema güncellendiğinde yapılan düzenlemenin kaybolmaması

Kod bilgisi olmayan veya tasarımı sık sık değiştirmek isteyen kullanıcılar için bir eklenti daha kolay olabilir. Fakat bir kez hazırlanıp uzun süre kullanılacak kurumsal bir giriş ekranı için özel kod daha temiz bir çözüm sunar.

Daha önce bende bu iş için eklenti kullandım "LoginPress" eklentisi bu iş için en iyilerden diyebilirim ancak bu kodlama sayesinde gereksiz bir eklentiden daha kurtulmuş oldum.

Neden functions.php Yerine MU-Plugin Kullanıyorum?

Bu kodu aktif temanın functions.php dosyasına da eklemek mümkündür. Ancak tema güncellendiğinde veya tema değiştirildiğinde kodun kaybolma ihtimali vardır.

Bu nedenle kodu WordPress’in Must-Use Plugins sistemine ekliyorum.

MU-Plugin dosyaları:

  • Temadan bağımsız çalışır.
  • WordPress tarafından otomatik olarak yüklenir.
  • Yönetim panelinden yanlışlıkla devre dışı bırakılamaz.
  • Tema güncellemelerinden etkilenmez.
  • Tek dosyayla kolayca kaldırılabilir.

Ayrıca WordPress çekirdeğindeki wp-login.php dosyasını kesinlikle düzenlemiyorum. Çekirdek dosyada yapılan değişiklikler güncellemelerle silinir ve teknik sorunlara neden olabilir.

İşleme Başlamadan Önce Yedek Alın

Kod eklemeden önce web sitenizin yedeğini almanızı öneririm.

En azından düzenleyeceğiniz veya oluşturacağınız dosyanın bir kopyasını bilgisayarınızda saklayın. Kodda oluşabilecek bir PHP hatasında ilgili dosyayı silerek giriş ekranını eski hâline döndürebilirsiniz.

Bu işlem için Hostinger Dosya Yöneticisi (Ben Hostinger firması ile çalışıyorum siz kendi hosting firmanızın Dosya Yöneticisini dikkate alın), FTP veya hosting panelinizde bulunan dosya yönetim aracını kullanabilirsiniz.

1. MU-Plugins Klasörünü Oluşturun

Hosting dosya yöneticisini açın ve şu dizine gidin:

				
					public_html/wp-content/
				
			

Bu klasörün içinde mu-plugins isimli bir klasör olup olmadığını kontrol edin.

Yoksa yeni bir klasör oluşturun:

				
					mu-plugins
				
			

Dizin yapısı şu şekilde görünmelidir:

				
					public_html/
└── wp-content/
    └── mu-plugins/
				
			

2. Giriş Sayfası Dosyasını Oluşturun

mu-plugins klasörünün içine yeni bir PHP dosyası oluşturun.

Dosya adı:

				
					custom-login-branding.php
				
			

İstediğiniz farklı bir dosya adı da kullanabilirsiniz. Ancak dosya uzantısının .php olması gerekir.

Dosyanın içine aşağıdaki kodu ekleyin.

3. WordPress Giriş Sayfası Özelleştirme Kodu

Aşağıdaki kodun en üst bölümünde yer alan ayarları değiştirerek tasarımı kendi markanıza uyarlayabilirsiniz.

				
					<?php
/**
 * Plugin Name: Custom Login Branding
 * Description: WordPress giriş ekranını markaya özel olarak düzenler.
 * Version: 1.0.0
 */

defined( 'ABSPATH' ) || exit;


/*
|--------------------------------------------------------------------------
| TASARIM AYARLARI
|--------------------------------------------------------------------------
|
| Aşağıdaki değerleri kendi markanıza göre değiştirebilirsiniz.
|
*/

function custom_login_brand_config(): array {
	return array(

		// Marka bilgileri
		'brand_name'  => 'WTR Ajans',
		'eyebrow'     => 'DİJİTAL MEDYA TEKNOLOJİLERİ',
		'heading'     => 'Markanızı dijitalde güçlendirin.',
		'description' => 'Web tasarım, SEO, sosyal medya ve yaratıcı içerik çözümlerinizi tek merkezden yönetin.',

		// Giriş formu üzerindeki metinler
		'panel_title'       => 'WTR Ajans Yönetim Paneli',
		'panel_description' => 'Güvenli giriş yaparak devam edin.',

		/*
		 * WordPress Ortamlar bölümündeki logonuzun tam URL adresini yazın.
		 * Şeffaf arka planlı PNG veya SVG kullanabilirsiniz.
		 */
		'logo_url' => 'https://siteadresiniz.com/wp-content/uploads/logo.png',

		// Renkler
		'background_start' => '#111338',
		'background_middle'=> '#301177',
		'background_end'   => '#7b16df',
		'accent_start'     => '#6f25e8',
		'accent_end'       => '#a117ef',
		'text_color'       => '#ffffff',
		'form_background'  => 'rgba(255, 255, 255, 0.96)',

		// Yazı tipi
		'font_family' => 'Manrope, Arial, sans-serif',

		// Form tasarımı
		'form_radius'  => '24px',
		'input_radius' => '12px',
		'button_radius'=> '12px',

		// Logo ölçüsü
		'logo_width'  => '180px',
		'logo_height' => '78px',
	);
}


/*
|--------------------------------------------------------------------------
| GİRİŞ SAYFASI STİLLERİ
|--------------------------------------------------------------------------
*/

function custom_login_branding_styles(): void {

	$config = custom_login_brand_config();

	$css = '
		body.login {
			min-height: 100vh;
			margin: 0;
			padding: 48px 7vw;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: minmax(0, 1.15fr) minmax(360px, 460px);
			align-items: center;
			gap: 70px;
			background:
				radial-gradient(
					circle at 15% 20%,
					rgba(157, 45, 255, .45),
					transparent 35%
				),
				radial-gradient(
					circle at 70% 85%,
					rgba(107, 33, 255, .30),
					transparent 32%
				),
				linear-gradient(
					135deg,
					' . esc_attr( $config['background_start'] ) . ' 0%,
					' . esc_attr( $config['background_middle'] ) . ' 52%,
					' . esc_attr( $config['background_end'] ) . ' 100%
				);
			font-family: ' . esc_attr( $config['font_family'] ) . ';
		}

		body.login::after {
			content: "";
			position: fixed;
			width: 500px;
			height: 500px;
			right: -200px;
			top: -220px;
			border: 1px solid rgba(255, 255, 255, .12);
			border-radius: 50%;
			pointer-events: none;
		}

		.custom-login-brand {
			max-width: 660px;
			color: ' . esc_attr( $config['text_color'] ) . ';
			position: relative;
			z-index: 2;
		}

		.custom-login-brand .custom-login-eyebrow {
			display: inline-block;
			margin-bottom: 18px;
			font-size: 13px;
			font-weight: 700;
			letter-spacing: 2px;
			opacity: .78;
		}

		.custom-login-brand h2 {
			margin: 0 0 20px;
			color: ' . esc_attr( $config['text_color'] ) . ';
			font-size: clamp(42px, 5vw, 72px);
			line-height: 1.05;
			letter-spacing: -2px;
		}

		.custom-login-brand p {
			max-width: 560px;
			margin: 0;
			color: rgba(255, 255, 255, .78);
			font-size: 18px;
			line-height: 1.7;
		}

		#login {
			width: 100%;
			margin: 0;
			padding: 0;
			position: relative;
			z-index: 3;
		}

		#login h1 a {
			width: ' . esc_attr( $config['logo_width'] ) . ';
			height: ' . esc_attr( $config['logo_height'] ) . ';
			margin: 0 auto 18px;
			background-image: url("' . esc_url( $config['logo_url'] ) . '");
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
		}

		.custom-login-intro {
			margin-bottom: 18px;
			text-align: center;
			color: #fff;
		}

		.custom-login-intro strong {
			display: block;
			margin-bottom: 5px;
			font-size: 22px;
			line-height: 1.3;
		}

		.custom-login-intro span {
			font-size: 14px;
			opacity: .78;
		}

		.login form {
			margin-top: 0;
			padding: 32px;
			border: 1px solid rgba(255, 255, 255, .50);
			border-radius: ' . esc_attr( $config['form_radius'] ) . ';
			background: ' . esc_attr( $config['form_background'] ) . ';
			box-shadow: 0 30px 80px rgba(5, 5, 35, .30);
		}

		.login label {
			color: #282843;
			font-size: 14px;
			font-weight: 600;
		}

		.login form .input,
		.login input[type="text"],
		.login input[type="password"] {
			min-height: 50px;
			margin-top: 8px;
			padding: 8px 14px;
			border: 1px solid #dedbea;
			border-radius: ' . esc_attr( $config['input_radius'] ) . ';
			background: #f8f7fc;
			color: #17172b;
			font-size: 16px;
			box-shadow: none;
		}

		.login form .input:focus,
		.login input[type="text"]:focus,
		.login input[type="password"]:focus {
			border-color: ' . esc_attr( $config['accent_end'] ) . ';
			background: #fff;
			box-shadow: 0 0 0 3px rgba(138, 34, 239, .13);
		}

		.login .button.wp-hide-pw {
			margin-top: 8px;
			color: ' . esc_attr( $config['accent_start'] ) . ';
		}

		.wp-core-ui .button-primary {
			width: 100%;
			min-height: 48px;
			margin-top: 8px;
			float: none;
			border: 0;
			border-radius: ' . esc_attr( $config['button_radius'] ) . ';
			background: linear-gradient(
				90deg,
				' . esc_attr( $config['accent_start'] ) . ',
				' . esc_attr( $config['accent_end'] ) . '
			);
			color: #fff;
			font-weight: 700;
			text-shadow: none;
			box-shadow: none;
			transition: transform .2s ease, box-shadow .2s ease;
		}

		.wp-core-ui .button-primary:hover,
		.wp-core-ui .button-primary:focus {
			filter: brightness(.92);
			color: #fff;
			transform: translateY(-1px);
			box-shadow: 0 12px 25px rgba(113, 30, 218, .25);
		}

		.login .forgetmenot {
			margin-top: 8px;
		}

		#nav,
		#backtoblog,
		.privacy-policy-page-link {
			text-align: center;
		}

		.login #nav a,
		.login #backtoblog a,
		.login .privacy-policy-page-link a {
			color: rgba(255, 255, 255, .82);
			text-decoration: none;
		}

		.login #nav a:hover,
		.login #backtoblog a:hover,
		.login .privacy-policy-page-link a:hover {
			color: #fff;
		}

		.login .message,
		.login .notice,
		.login #login_error {
			border-left: 0;
			border-radius: 12px;
			box-shadow: none;
		}

		@media (max-width: 900px) {
			body.login {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 24px;
			}

			.custom-login-brand {
				display: none;
			}

			#login {
				max-width: 420px;
			}
		}

		@media (max-width: 480px) {
			body.login {
				padding: 18px;
			}

			.login form {
				padding: 24px 20px;
				border-radius: 18px;
			}

			#login h1 a {
				width: 145px;
				height: 62px;
			}
		}
	';

	wp_register_style(
		'custom-login-branding',
		false,
		array(),
		'1.0.0'
	);

	wp_enqueue_style( 'custom-login-branding' );
	wp_add_inline_style( 'custom-login-branding', $css );
}

add_action(
	'login_enqueue_scripts',
	'custom_login_branding_styles'
);


/*
|--------------------------------------------------------------------------
| SOL TARAFTAKİ MARKA ALANI
|--------------------------------------------------------------------------
*/

function custom_login_brand_panel(): void {

	$config = custom_login_brand_config();
	?>
	<div class="custom-login-brand">

		<span class="custom-login-eyebrow">
			<?php echo esc_html( $config['eyebrow'] ); ?>
		</span>

		<h2>
			<?php echo esc_html( $config['heading'] ); ?>
		</h2>

		<p>
			<?php echo esc_html( $config['description'] ); ?>
		</p>

	</div>
	<?php
}

add_action(
	'login_header',
	'custom_login_brand_panel'
);


/*
|--------------------------------------------------------------------------
| FORM ÜZERİNDEKİ BAŞLIK
|--------------------------------------------------------------------------
*/

function custom_login_intro_message( string $message ): string {

	$config = custom_login_brand_config();

	$intro = sprintf(
		'<div class="custom-login-intro">
			<strong>%1$s</strong>
			<span>%2$s</span>
		</div>',
		esc_html( $config['panel_title'] ),
		esc_html( $config['panel_description'] )
	);

	return $intro . $message;
}

add_filter(
	'login_message',
	'custom_login_intro_message'
);


/*
|--------------------------------------------------------------------------
| LOGO BAĞLANTISI
|--------------------------------------------------------------------------
*/

function custom_login_logo_url(): string {
	return home_url( '/' );
}

add_filter(
	'login_headerurl',
	'custom_login_logo_url'
);


/*
|--------------------------------------------------------------------------
| LOGO AÇIKLAMA METNİ
|--------------------------------------------------------------------------
*/

function custom_login_logo_text(): string {

	$config = custom_login_brand_config();

	return $config['brand_name'];
}

add_filter(
	'login_headertext',
	'custom_login_logo_text'
);


/*
|--------------------------------------------------------------------------
| DİL SEÇİCİYİ GİZLE
|--------------------------------------------------------------------------
*/

add_filter(
	'login_display_language_dropdown',
	'__return_false'
);
				
			

4. Kodda Hangi Alanları Değiştirmeniz Gerekiyor?

Kodun tamamını anlamanız veya düzenlemeniz gerekmiyor. En üstte bulunan TASARIM AYARLARI bölümündeki değerleri değiştirmeniz yeterlidir.

Marka adını değiştirme

				
					'brand_name' => 'WTR Ajans',
				
			

Buraya kendi marka veya firma adınızı yazın:

				
					'brand_name' => 'Firma Adınız',
				
			

Sol taraftaki küçük başlığı değiştirme

				
					'eyebrow' => 'DİJİTAL MEDYA TEKNOLOJİLERİ',
				
			

Örnek:

				
					'eyebrow' => 'PROFESYONEL YÖNETİM PANELİ',
				
			

Ana başlığı değiştirme

				
					'heading' => 'Markanızı dijitalde güçlendirin.',
				
			

Örnek:

				
					'heading' => 'Yönetim panelinize hoş geldiniz.',
				
			

Açıklama metnini değiştirme

				
					'description' => 'Web tasarım, SEO, sosyal medya ve yaratıcı içerik çözümlerinizi tek merkezden yönetin.',
				
			

Buraya firmanızın hizmetlerini veya kısa bir karşılama mesajı yazabilirsiniz.

Formun üzerindeki metinleri değiştirme

				
					'panel_title' => 'WTR Ajans Yönetim Paneli',
				
			

ve:

				
					'panel_description' => 'Güvenli giriş yaparak devam edin.',
				
			

Örneğin:

				
					'panel_title' => 'Firma Yönetim Paneli',
'panel_description' => 'Hesabınıza giriş yaparak devam edin.',
				
			

Logo adresini değiştirme

Kodun en önemli alanlarından biri şudur:

				
					'logo_url' => 'https://siteadresiniz.com/wp-content/uploads/logo.png',
				
			

WordPress panelinde:

Ortamlar → Kütüphane

bölümüne girin. Logonuzu seçin ve “Dosya URL’si” alanındaki tam bağlantıyı kopyalayın.

Örnek:

				
					'logo_url' => 'https://ornekfirma.com/wp-content/uploads/2026/07/logo.png',
				
			

Şeffaf arka planlı PNG veya SVG logo kullanılması daha iyi sonuç verir.

Arka plan renklerini değiştirme

Giriş ekranında üç renkli geçiş kullanılıyor:

				
					'background_start'  => '#111338',
'background_middle' => '#301177',
'background_end'    => '#7b16df',
				
			

Mavi bir tasarım için:

				
					'background_start'  => '#071a33',
'background_middle' => '#064d80',
'background_end'    => '#0c8ce9',
				
			

Siyah ve kırmızı bir tasarım için:

				
					'background_start'  => '#090909',
'background_middle' => '#2b0b0b',
'background_end'    => '#b31323',
				
			

Yeşil bir tasarım için:

				
					'background_start'  => '#07251c',
'background_middle' => '#0c5c42',
'background_end'    => '#19a974',
				
			

Buton renklerini değiştirme

				
					'accent_start' => '#6f25e8',
'accent_end'   => '#a117ef',
				
			

Bu iki renk giriş butonundaki geçişi oluşturur.

Örnek:

				
					'accent_start' => '#0068ff',
'accent_end'   => '#00a8ff',
				
			

Yazı tipini değiştirme

				
					'font_family' => 'Manrope, Arial, sans-serif',
				
			

Örnek:

				
					'font_family' => 'Arial, sans-serif',
				
			

veya:

				
					'font_family' => 'Montserrat, Arial, sans-serif',
				
			

Seçtiğiniz yazı tipinin site tarafından yüklenmiş olması gerekir. Aksi hâlde tarayıcı listedeki sonraki yazı tipini kullanır.

Köşe yuvarlaklıklarını değiştirme

Formun köşe yuvarlaklığı:

				
					'form_radius' => '24px',
				
			

Daha köşeli bir görünüm için:

				
					'form_radius' => '8px',
				
			

Tamamen düz köşeler için:

				
					'form_radius' => '0px',
				
			

Aynı şekilde giriş alanları ve butonlar da değiştirilebilir:

				
					'input_radius'  => '12px',
'button_radius' => '12px',
				
			

Logo boyutunu değiştirme

				
					'logo_width'  => '180px',
'logo_height' => '78px',
				
			

Logo küçük görünüyorsa genişliği artırabilirsiniz:

				
					'logo_width'  => '220px',
'logo_height' => '90px',
				
			

5. Tasarımı Nasıl Test Edebilirsiniz?

Dosyayı kaydettikten sonra şu adresi açın:

				
					https://siteadresiniz.com/wp-login.php
				
			

Daha önce oturum açtıysanız giriş ekranını göremeyebilirsiniz. Bu durumda:

  • WordPress hesabından çıkış yapın.
  • Tarayıcıda gizli pencere açın.
  • Site önbelleğini temizleyin.
  • wp-login.php adresini yeniden ziyaret edin.

Masaüstü görünümünü kontrol ettikten sonra tarayıcı geliştirici araçlarıyla veya telefonunuzdan mobil görünümü de test edin.

Mobil cihazlarda sol taraftaki tanıtım alanı otomatik olarak gizlenir ve yalnızca giriş formu gösterilir.

6. Tasarımı Eski Hâline Nasıl Getirebilirsiniz?

Kodda hata oluşursa veya tasarımı kaldırmak isterseniz şu dosyayı silmeniz yeterlidir:

				
					wp-content/mu-plugins/custom-login-branding.php
				
			

Dosya kaldırıldığında WordPress giriş ekranı varsayılan tasarımına geri döner.

WordPress çekirdek dosyalarında herhangi bir değişiklik yapılmadığı için geri alma işlemi oldukça kolaydır.

7. Sık Karşılaşılan Sorunlar

Logo görünmüyor

Logo URL’sinin doğru olduğundan emin olun.

Bağlantıyı yeni sekmede açtığınızda logo görüntülenmelidir.

Yanlış:

'logo_url' => '/uploads/logo.png',

Doğru:

'logo_url' => 'https://siteadresiniz.com/wp-content/uploads/2026/07/logo.png',
Beyaz logo beyaz zeminde görünmüyor

Kodda logo, formun üstünde ve arka plan üzerinde gösterilir. Ancak kullandığınız tasarıma göre beyaz logo görünmeyebilir.

Bu durumda:

  • Renkli logo kullanın.
  • Logonun arkasına renk ekleyin.
  • Farklı bir logo sürümü yükleyin.
Kod eklendikten sonra beyaz ekran çıktı

PHP kodunda yazım hatası olmuş olabilir.

Hosting dosya yöneticisine girip şu dosyayı yeniden adlandırın veya silin:

custom-login-branding.php

Ardından site tekrar açılacaktır.

Kod düzenlerken akıllı tırnak işaretleri yerine normal tek ve çift tırnak kullanılması gerekir.

Yazı tipi değişmedi

Yazdığınız font web sitesinde yüklü olmayabilir.

Örneğin:

 
'font_family' => 'Manrope, Arial, sans-serif',
 

yazmanız Manrope fontunun otomatik olarak indirileceği anlamına gelmez.

Font siteye daha önce eklenmediyse Arial veya sistem fontu kullanılır.

Önbellek nedeniyle eski tasarım görünüyor

Aşağıdaki önbellekleri temizleyin:

  • WordPress önbellek eklentisi
  • Hosting önbelleği
  • CDN veya Cloudflare önbelleği
  • Tarayıcı önbelleği

Ardından sayfayı gizli sekmede kontrol edin.

Form mobilde ekrana sığmıyor

Kodda mobil cihazlar için özel düzenlemeler bulunuyor. Ancak sonradan eklediğiniz uzun metinler form alanının uzamasına neden olabilir.

900px altındaki ekranlarda sol alan gizlenir:

 
@media (max-width: 900px)
 

Bu değeri değiştirmek isterseniz örneğin:

 
@media (max-width: 1024px)
 

olarak düzenleyebilirsiniz.

Bu Kod Güvenlik Sağlar mı?

Hayır. Bu kod yalnızca WordPress giriş sayfasının görünümünü değiştirir.

Şunları sağlamaz:

  • Giriş adresini gizleme
  • İki aşamalı doğrulama
  • Brute force koruması
  • CAPTCHA
  • Başarısız giriş sınırı
  • Firewall
  • Zararlı yazılım taraması

Giriş güvenliği için ayrıca:

  • Güçlü parola
  • İki aşamalı doğrulama
  • Güncel WordPress ve eklentiler
  • Sınırlı yönetici hesabı
  • Düzenli yedekleme

gibi önlemler kullanılmalıdır.

Görsel özelleştirme ile güvenlik özelliğini birbirine karıştırmamak gerekir.

Kendi Uygulamamda Nasıl Kullandım?

WTR Ajans web sitesinde giriş ekranını markanın mor ve lacivert renklerine göre hazırladım. Sol tarafta ajansın hizmet yapısını anlatan kısa bir mesaj, sağ tarafta ise sade ve okunabilir bir giriş formu kullandım.

Masaüstünde iki sütunlu bir tasarım tercih ederken, mobil cihazlarda gereksiz alan kaplamaması için tanıtım bölümünü gizledim.

Ayrıca:

  • WordPress logosunu WTR logosuyla değiştirdim.
  • Logo bağlantısını ana sayfaya yönlendirdim.
  • Giriş butonunu marka renklerine göre düzenledim.
  • Form alanlarına daha modern bir görünüm verdim.
  • Dil seçiciyi kaldırdım.
  • Giriş ekranını tema dosyalarından bağımsız hâle getirdim.

İlk uygulamada form alanının masaüstünde biraz küçük kaldığını fark ettim. Genişliği artırdıktan ve logo ölçüsünü düzenledikten sonra tasarım daha dengeli görünmeye başladı. Mobil görünümde ise sol taraftaki tanıtım alanını kaldırarak yalnızca giriş formunu bıraktım.

Eklenti Kullanmak İsteyenler İçin Alternatif

Kod kullanmak istemeyen kullanıcılar giriş sayfası özelleştirme eklentilerinden yararlanabilir.

Bu tür eklentiler genellikle:

  • Canlı önizleme
  • Logo değiştirme
  • Arka plan ayarı
  • Buton renkleri
  • Form tasarımı
  • Özel CSS

gibi seçenekler sunar.

Eklenti tercih edecek olsaydım, kullanım kolaylığı nedeniyle LoginPress seçeneğini değerlendirirdim.

Ancak giriş ekranı tasarımı bir kez hazırlanacak ve uzun süre değişmeyecekse, yalnızca bu işlem için ek bir eklenti kurmak yerine özel kod kullanmak daha sade bir çözüm olabilir.

WordPress giriş sayfasını özelleştirmek için mutlaka bir eklenti kullanmak gerekmiyor.

WordPress’in sunduğu giriş ekranı hook’ları ve tek bir MU-Plugin dosyası kullanılarak:

  • Markaya özel
  • Mobil uyumlu
  • Tema güncellemelerinden bağımsız
  • Kolayca kaldırılabilir
  • Hafif

bir giriş ekranı hazırlanabilir.

Bu yöntemin en önemli avantajı, kodun üst bölümündeki ayarlar değiştirilerek farklı markalara kolayca uyarlanabilmesidir.

Logo, renk, yazı, font ve form tasarımını kendi kurumsal kimliğinize göre düzenleyerek standart WordPress giriş sayfasını daha profesyonel bir yönetim ekranına dönüştürebilirsiniz.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir