چهار زبان برنامه نویسی که برای فهمیدن وردپرس لازم است!

0 3,795 خواندن این مطلب 6 دقیقه زمان میبرد

یادگیری توسعه وردپرس با بسیاری از سوالات اصلی از جمله این سوال شروع می شود: “وردپرس به چه زبانی نوشته شده است؟” یکی دیگر از موارد رایج “این است که ابتدا PHP یا JavaScript را یاد بگیرم؟” زبان های برنامه نویسی برای طراحی سایت موضوع مهمی است. ما تمام مواردی که برای شروع به کار نیاز دارید را پوشش خواهیم داد. پاسخ “وردپرس از چه زبان برنامه نویسی استفاده می کند؟” چهار زبان برنامه نویسی اصلی است. وردپرس به چهار زبان HTML و CSS و JavaScript و PHP متکی است. در اینجا ما هر یک از زبان های فنی وردپرس را معرفی می کنیم.

HTML: آنچه وب از آن ساخته شده است

HTML یک بخش جهانی از وب است. هر صفحه ای که در اینترنت با محتوای داخل آن مشاهده می کنید با برخی از ورژن های HTML مشخص شده است. HTML در واقع یک زبان “برنامه نویسی” نیست، یک زبان “نشانه گذاری” است. مخفف HyperText Markup Language است. یک فایل HTML اساساً یک سند متنی بزرگ است، اما در آن “علامت گذاری” نهفته شده است تا معنی خاص بیت های مختلف متن را توضیح دهد. در اینجا کمی از کد های HTML را نشان داده ایم.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Page Title in Search Results</title>
	</head>
	<body>
		<h1>Page Title at Top of Page</h1>
		<p class="lorem">Lorem ipsum dolor sit amet…</p>
	</body>
</html>

این یک صفحه HTML کامل اما بسیار کوچک است. همانطور که می بینید در HTML بیشتر عناصر بین دو تگ مختلف (چیزهایی که در داخل علامت های کمتر یا بیشتر هستند) قرار دارند. به عنوان مثال تگ <p></p> هرچیزی در داخل و بخشی از آن قرار بگیرد، پاراگراف است.

برخی دیگر از عناصر خودشان بسته می شوند، مانند <meta charset… /> در این مثال. برچسب های تصویر <img /> مثال دیگری است. این فقط به این معنی است که هیچ چیزی “بین” باز و بسته شدن (مانند تگ <p>) وجود ندارد، زیرا چیز هایی مانند تصاویر محتوای متن را در داخل خود ندارند.

به عناصر می توان صفات داد. در مثال ما به عنصر <p> (پاراگراف) یک کلاس لورم اختصاص داده شد. ما می توانیم از این کلاس برای انجام همه کار ها استفاده کنیم. احتمالاً مهم ترین نکته این است که می توانیم با استفاده از یک قانون CSS واحد به همه عناصر دارای آن کلاس دقیقاً بگوییم که چگونه و با چه استایلی به نظر برسند.

CSS: ایجاد ظاهر خوب در HTML

CSS مخفف Cascading Style Sheets روشی است که تقریباً در همه صفحات وب مدرن مدل سازی می شود، به معنای “داشتن ظاهری خاص”. در CSS شما می توانید به عناصر HTML مانند تگ های <h1> یا صفات HTML استایل دهید، مانند کلاس lorem که قبلاً ذکر کردیم. در هر صورت syntax کاملاً یکسان است و به صورت زیر می باشد:

.lorem {
	color: #325050;
	background: #fff;
	font-family: 'Libre Baskerville', sans-serif;
	font-size: .85rem;
}

ما ابتدا مشخص می کنیم که مجموعه قانون طراحی بر کدام عنصر یا عناصر HTML تأثیر می گذارد: در این مثال، قاعده ما فقط بر روی عناصری که کلاس لورم به آن ها اختصاص داده شده تأثیر می گذارد. (در CSS کلاس ها با یک نقطه شروع می شوند.)

و سپس در داخل براکت ما مجموعه ای از خصوصیات استایل را داریم: property، به دنبال آن یک دونقطه، مشخصات آن property و یک نقطه ویرگول. خطوط جدید بعد از نقطه ویرگول می آیند. نکته مهم در مورد CSS این است که بدانید از چه خصوصیاتی استفاده کنید تا صفحه مورد نظر شما را به شکل دلخواه درآورد.

PHP: زبان برنامه نویسی وردپرس

PHP همان چیزی است که وردپرس را روی وب سرور شما اجرا می کند. وردپرس از زبان برنامه نویسی PHP در سرور برای ساختن صفحات و گردآوری آن ها استفاده می کند. بنابراین مهم ترین زبان برنامه نویسی برای درک واقعی وردپرس PHP است.

PHP در ابتدا با هدف ساخت آسان تر صفحات HTML ساخته شد. به طور پیش فرض نتایج عملکرد خود را به یک صفحه HTML ارائه می دهد. سپس سرور بازدید کنندگان سایت شما را نشان می دهد. برای قالب های وردپرس منطق و ساختار های اساسی PHP بسیار مهم است. در اینجا یک قطعه کد آورده شده است سپس توضیح خواهیم داد.

<?php
$variable = 4;
$math = $variable + 1;
if ( $math > $variable ) {
	echo 'Yay. Math yielded '.$math.'! '; // User's screen will show: "Yay. Math yielded 5! "
	echo 'Variable was '.$variable.'.'; // User's screen will show: "Variable was 4."
}
?>
<p>I'm an HTML paragraph. Hi!</p>
<?php if (true) : ?>
	<p>I'm HTML that will render, because I'm inside a true if-statement.</p>
<?php endif; ?>
<?php if (false) : ?>
	<p>I'm HTML that won't render, because I'm inside a false if-statement.</p>
<?php endif; ?>

چند نکته مهم برای این مثال وجود دارد:

اول هر چیزی که در داخل تگ های PHP نباشد (<؟ php ؟>) فقط HTML ساده است. هنگامی که سرور، فایل PHP را پردازش می کند، دقیقاً همانند یک صفحه HTML معمولی این موارد را برای بازدید کننده نمایش می دهد.
متغیر ها در PHP با علامت دلار شروع می شوند، مانند: $variable. ما ابتدا $variable را روی 4 قرار دادیم سپس 1 را به آن اضافه کردیم تا 5 شود و آن را به عنوان $math ذخیره کردیم.
در بخشی از کد PHP شما از دستور echo برای چاپ هر چیزی در صفحه HTML نهایی استفاده می کنید. دو خط بالای echo هر دو رشته متنی منظم (درون نویسه های ‘ ‘) را با متغیر های PHP بهم می پیوندند. این اتصال با استفاده از عملگر نقطه، به شرح زیر است: <?php echo ‘One and ‘ . ‘two’; ?>
منطق PHP هر HTML موجود در آن را کنترل می کند. به همین دلیل است که HTML داخل اولین عبارت شرطی PHP، اگر (درست) باشد، در صفحه نشان داده می شود، اما HTML داخل جمله دوم، اگر (غلط) باشد نشان داده می شود.

JavaScript: برنامه نویسی مرورگر های وب

جاوا اسکریپت اختراع شد تا بتواند رفتار صفحات HTML را برنامه نویسی کند. به عنوان مثال اگر روی چیزی کلیک کنید و آن ناپدید شود، رنگ دیگری پیدا کند یا به یک چیز بزرگ تر تبدیل شود به احتمال زیاد جاوا اسکریپتی در کار است.

یک قالب وردپرس می تواند بدون استفاده از JavaScript کاملاً کار کند و بسیار خوب اجرا شود. اما مانند بیشتر جاهای وب، JavaScript بیشتری در درون قالب های وردپرس و هسته اصلی وردپرس مشاهده می کنید. این بدان دلیل است که جاوا اسکریپت امکان تعامل سریع تر و حسی را فراهم می کند که صفحه برای بازدید کننده جذاب باشد و به او پاسخ می دهد.

اگر فقط می خواهید وردپرس را یاد بگیرید، عمدتا با سه زبان دیگر آشنا می شوید، زیرا HTML و CSS بیشتر اجباری هستند و PHP جایی است که بسیاری از کار های سنگین وزن جالب اتفاق می افتد. بنابراین این مقاله در مورد JavaScript زیاد صحبت نخواهد کرد و ما به شما توصیه می کنیم با درک کاملی از سه زبان دیگر شروع کنید.

اگرچه برای یادگیری شما یک قطعه کد JavaScript که در اینجا از آن در WPShout استفاده می کنیم، قرار می دهیم. از کتابخانه jQuery فوق العاده رایج و بسیار مفید JavaScript استفاده می کند و هدف آن تعیین حداقل ارتفاع برای نوار کناری سمت چپ ما است تا نتواند به پاورقی برخورد کند.

( function( $ ) {
	// 1. Define variables
	var navMenu = '.primary-navigation';
	var pageContent = '.main-content';
	var gap = parseInt( $( 'html' ).css( 'font-size' ), 10 ) * 2;

	// 2. Define function to give min-height
	function setPageMin() {
		var height = $( navMenu ).height();
		$( pageContent ).css( 'min-height', height + gap );
	}

	$( window ).load( function() {
		// 3. Run function on first window load
		setPageMin();

		// 4. Run function every 120 MS when window resized
		$( window ).resize( function() {
			setTimeout( function() {
	      			setPageMin();
			}, 120);
		});
	});
})(jQuery);

آیا برای توسعه وردپرس (ابتدا) باید زبان برنامه نویسی JavaScript را یاد بگیرم یا PHP؟

یک سوال واقعاً رایج این روز ها خصوصاً اکنون که ویرایشگر جدید وردپرس مبتنی بر جاوا اسکریپت (با نام “Gutenberg“) اینجاست که ابتدا باید کدام زبان را یاد گرفت. اگر مهارت های خود را برای HTML و CSS کسب نکرده اید، ابتدا این کار را انجام دهید. وردپرس PHP و وردپرس جاوا اسکریپت به این زبان ها وابسته هستند.

هنگامی که متوجه شدید که CSS و HTML چگونه کار می کنند، ما فکر می کنیم PHP برای مرحله بعدی یادگیری شما بهتر است. دلیل این امر این است که مطمئناً می توانید یک قالب یا افزونه وردپرس را بدون جاوا اسکریپت ایجاد کنید اما هرگز بدون PHP آن را ایجاد نمی کنید.

علاوه بر این بیشتر کار هایی که باید در وردپرس انجام دهید بسیار پیچیده تر هستند پس اگر در PHP ماهر نشوید اما در JavaScript مهارت داشته باشید به مشکل بر می خورید. قدرت بالای زبان برنامه نویسی JavaScript تعاملی غنی در سمت مشتری ایجاد می کند. اما سرور های وردپرس هنوز منحصراً با PHP صحبت می کنند، بنابراین هر کاری که بخواهید در سرور انجام دهید از برخی کد های PHP برای تغییرات سرور استفاده می شود.